*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  /* ── Dark theme (default) ── */
  --bg:        #070c14;
  --sidebar:   #0a1120;
  --surface:   #0d1627;
  --surface-2: #111e33;
  --surface-3: #162440;
  --border:    rgba(255,255,255,0.06);
  --border-h:  rgba(0,212,255,0.35);
  --accent:    #00d4ff;
  --accent-d:  rgba(0,212,255,0.12);
  --accent-g:  0 0 18px rgba(0,212,255,0.25);
  --green:     #00e5a0;
  --red:       #ff4d6a;
  --amber:     #ffb547;
  --t1: #eef2f8;
  --t2: #7a8fa8;
  --t3: #3d5168;
  --sidebar-w: 220px;
  --topbar-h:  80px;
  --charts-h:  230px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
  --sh-md: 0 4px 20px rgba(0,0,0,0.5);
  --sh-lg: 0 8px 40px rgba(0,0,0,0.65);
  --map-legend-bg: rgba(7,12,20,0.92);
  --select-arrow: '%233d5168';
}

/* ── Light theme ── */
[data-theme="light"] {
  --bg:        #f0f4f8;
  --sidebar:   #ffffff;
  --surface:   #ffffff;
  --surface-2: #f0f4f8;
  --surface-3: #e2e8f0;
  --border:    rgba(0,0,0,0.09);
  --border-h:  rgba(2,132,199,0.45);
  --accent:    #0284c7;
  --accent-d:  rgba(2,132,199,0.1);
  --accent-g:  0 0 18px rgba(2,132,199,0.2);
  --green:     #059669;
  --red:       #dc2626;
  --amber:     #d97706;
  --t1: #0f172a;
  --t2: #475569;
  --t3: #94a3b8;
  --sh-md: 0 4px 20px rgba(0,0,0,0.12);
  --sh-lg: 0 8px 40px rgba(0,0,0,0.18);
  --map-legend-bg: rgba(255,255,255,0.96);
  --select-arrow: '%2394a3b8';
}

/* ── Modern theme (purple / glass) ── */
[data-theme="modern"] {
  --bg:        #0f0d1a;
  --sidebar:   #160f2b;
  --surface:   #1a1630;
  --surface-2: #221d3a;
  --surface-3: #2a2448;
  --border:    rgba(255,255,255,0.07);
  --border-h:  rgba(168,85,247,0.55);
  --accent:    #a855f7;
  --accent-d:  rgba(168,85,247,0.14);
  --accent-g:  0 0 20px rgba(168,85,247,0.35);
  --green:     #10b981;
  --red:       #f43f5e;
  --amber:     #f59e0b;
  --t1: #ede9fe;
  --t2: #9d8fc4;
  --t3: #524d6e;
  --sh-md: 0 4px 20px rgba(0,0,0,0.55);
  --sh-lg: 0 8px 40px rgba(0,0,0,0.7);
  --map-legend-bg: rgba(15,13,26,0.93);
  --select-arrow: '%23524d6e';
}

html { height:100%; overflow:hidden; }
body { height:100%; font-family:'Inter',sans-serif; background:var(--bg); color:var(--t1); overflow:hidden; display:flex; flex-direction:column; }

/* height:100% follows the html→body chain so all three share the same reference,
   avoiding the sub-pixel gap that 100vh can produce at non-integer DPR on Windows. */
.app-shell { display:flex; flex:1; min-height:0; width:100%; overflow:hidden; }

/* ── Sidebar ── */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--sidebar); border-right:1px solid var(--border);
  display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; z-index:20;
}
.sidebar::before { content:''; display:block; height:2px; flex-shrink:0; background:linear-gradient(90deg,var(--accent),var(--green)); }

.sidebar-brand { display:flex; align-items:center; gap:10px; padding:14px 14px 12px; border-bottom:1px solid var(--border); }
.brand-icon { width:64px; height:64px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.brand-title { font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700; color:var(--t1); }
.brand-sub   { font-size:9px; color:var(--t3); letter-spacing:.4px; margin-top:1px; }

.nav-list { list-style:none; padding:10px 8px; display:flex; flex-direction:column; gap:2px; }
.nav-item {
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  border-radius:var(--r-md); cursor:pointer; font-size:12px; font-weight:500;
  color:var(--t2); transition:all .15s; border:1px solid transparent;
}
.nav-item:hover { background:var(--surface-2); color:var(--t1); }
.nav-item.active { background:var(--accent-d); color:var(--accent); border-color:rgba(0,212,255,.15); box-shadow:var(--accent-g); }
.nav-icon { font-size:14px; flex-shrink:0; }

.sidebar-controls { padding:12px 12px 20px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:5px; margin-top:auto; }
.ctrl-label { font-size:9px; font-weight:700; color:var(--t3); letter-spacing:.8px; margin-top:8px; margin-bottom:2px; }
.ctrl-select {
  width:100%; padding:7px 24px 7px 10px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm);
  color:var(--t1); font-family:inherit; font-size:11px; cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%233d5168' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; transition:border-color .2s;
}
[data-theme="light"] .ctrl-select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%2394a3b8' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
}
[data-theme="modern"] .ctrl-select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23524d6e' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
}
.ctrl-select:focus { outline:none; border-color:var(--border-h); box-shadow:var(--accent-g); }

.layer-toggles { display:flex; flex-direction:column; gap:4px; }
.layer-toggle { display:flex; align-items:center; gap:8px; cursor:pointer; padding:4px 2px; }
.layer-toggle input { display:none; }
.toggle-track { width:28px; height:15px; border-radius:8px; background:var(--surface-3); border:1px solid var(--border); position:relative; flex-shrink:0; transition:background .2s; }
.toggle-track::after { content:''; position:absolute; top:2px; left:2px; width:9px; height:9px; border-radius:50%; background:var(--t3); transition:all .2s; }
.layer-toggle input:checked ~ .toggle-track { background:var(--accent-d); border-color:rgba(0,212,255,.35); }
.layer-toggle input:checked ~ .toggle-track::after { background:var(--accent); left:15px; box-shadow:0 0 6px var(--accent); }
.toggle-label { font-size:11px; color:var(--t2); }
.layer-toggle:hover .toggle-label { color:var(--t1); }

.format-desc { margin-top:5px; }
.format-desc-item { display:none; align-items:flex-start; gap:6px; padding:7px 9px; background:var(--surface-2); border:1px solid var(--border); border-left:2px solid var(--accent); border-radius:var(--r-sm); font-size:10px; line-height:1.45; color:var(--t2); }
.format-desc-item.active { display:flex; }
.format-desc-item svg { flex-shrink:0; margin-top:1px; color:var(--accent); }

.layer-fixed-active { display:flex; align-items:center; gap:8px; padding:4px 2px; cursor:default; }
.fixed-active-dot { width:28px; height:15px; border-radius:8px; background:var(--accent-d); border:1px solid rgba(0,212,255,.35); position:relative; flex-shrink:0; }
.fixed-active-dot::after { content:''; position:absolute; top:2px; left:15px; width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 6px var(--accent); }
.layer-fixed-active .toggle-label { color:var(--t1); opacity:0.75; }

/* ── Main Area ── */
.main-area { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }

/* ── Topbar ── */
.topbar {
  height:var(--topbar-h); flex-shrink:0; position:relative;
  background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 16px; gap:12px; box-shadow:var(--sh-md);
}
.topbar::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--accent),var(--green),#a78bfa); }
.topbar-left { flex:0 0 auto; }
.page-title { font-family:'Space Grotesk',sans-serif; font-size:16px; font-weight:700; }
.page-title span { color:var(--accent); }
.page-sub { font-size:10px; color:var(--t3); margin-top:2px; }
.topbar-center { flex:1; display:flex; justify-content:center; }
.search-box { display:flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:7px 12px; transition:border-color .2s,box-shadow .2s; }
.search-box:focus-within { border-color:var(--border-h); box-shadow:var(--accent-g); }
.search-icon { font-size:13px; opacity:.45; }
.search-input { background:none; border:none; outline:none; color:var(--t1); font-size:12px; font-family:inherit; width:200px; }
.search-input::placeholder { color:var(--t3); }
.search-btn { background:var(--accent-d); border:1px solid rgba(0,212,255,.22); border-radius:var(--r-sm); color:var(--accent); font-size:11px; font-weight:600; padding:3px 10px; cursor:pointer; transition:all .2s; }
.search-btn:hover { background:var(--accent); color:var(--bg); }

.report-btn { background:var(--accent); border:1px solid rgba(0,212,255,.22); border-radius:var(--r-sm); color:var(--bg); font-size:11px; font-weight:600; padding:10px 12px; cursor:pointer; transition:all .2s; width:100%; }
.report-btn:hover { background:var(--green); color:var(--bg); }

.topbar-kpis { display:flex; align-items:stretch; border-left:1px solid var(--border); height:100%; flex:0 0 auto; }
.strip-card { display:flex; align-items:center; gap:10px; padding:0 14px; border-right:1px solid var(--border); cursor:default; transition:background .2s; position:relative; height:100%; }
.strip-card:last-child { border-right:none; }
.strip-card:hover { background:var(--surface-2); }
.strip-card.danger::after,.strip-card.safe::after,.strip-card.accent::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; }
.strip-card.danger::after { background:var(--red); }
.strip-card.safe::after   { background:var(--green); }
.strip-card.accent::after { background:var(--accent); }
.strip-icon { font-size:16px; flex-shrink:0; }
.strip-val { font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:700; color:var(--t1); white-space:nowrap; }
.strip-lbl { font-size:9px; color:var(--t3); text-transform:uppercase; letter-spacing:.5px; margin-top:2px; }

/* ── Content Row ── */
.content-row { flex:1; min-height:0; display:flex; overflow:hidden; position:relative; }

.map-wrap { flex:1; position:relative; overflow:hidden; }
#map { width:100%; height:100%; }

.map-legend { position:absolute; bottom:16px; left:16px; background:var(--map-legend-bg); backdrop-filter:blur(12px); border:1px solid rgba(0,212,255,.14); border-radius:var(--r-lg); padding:10px 14px 14px; z-index:400; max-width:240px; box-shadow:var(--sh-lg); max-height:300px; overflow-y:auto; transition:max-height .25s ease, padding .25s ease; }
.map-legend.panel-hidden { display:none !important; }
.map-legend.collapsed { max-height:38px; overflow:hidden; padding-bottom:10px; }
.map-legend.collapsed #legendBody { display:none; }
.legend-header { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:4px; }
.legend-header strong { font-family:'Space Grotesk',sans-serif; font-size:12px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.7px; }
.legend-toggle-btn { background:none; border:none; cursor:pointer; color:var(--t3); font-size:11px; padding:0 2px; line-height:1; flex-shrink:0; transition:color .15s, transform .2s; }
.legend-toggle-btn:hover { color:var(--accent); }
.map-legend.collapsed .legend-toggle-btn { transform:rotate(-90deg); }
#legendBody { border-top:1px solid var(--border); margin-top:6px; padding-top:7px; }
#legendContent { display:flex; flex-direction:column; gap:8px; }
.legend-section { display:flex; flex-direction:column; gap:6px; }
.legend-section-title { font-size:10px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:0.8px; }
.legend-item { display:grid; grid-template-columns:16px 1fr; gap:8px; align-items:center; padding:3px 0; }
.legend-color { width:16px; height:16px; border-radius:3px; border:1px solid rgba(255,255,255,.08); }
.legend-gradient { width:100%; height:12px; border-radius:999px; border:1px solid rgba(255,255,255,.08); }
.legend-gradient-labels { display:flex; justify-content:space-between; gap:8px; margin-top:5px; font-size:10px; color:var(--t2); }
.legend-label { font-size:10px; font-weight:700; color:var(--t1); text-transform:uppercase; }
.legend-range,.legend-desc { font-size:9px; color:var(--t2); }

.draw-results-table { width:100%; border-collapse:collapse; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.draw-results-table th, .draw-results-table td { padding:8px 10px; border-bottom:1px solid rgba(255,255,255,0.06); color:var(--t1); }
.draw-results-table th { background:rgba(255,255,255,0.03); color:var(--t3); font-size:9px; text-transform:uppercase; letter-spacing:.4px; }
.draw-results-table tbody tr { background: rgba(255,255,255,0.04); }
.draw-results-table tbody tr:last-child td { border-bottom:none; }
.draw-results-table td { background:transparent; }
.draw-results-table tr { background:transparent; }

.map-tip { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); background:rgba(7,12,20,.82); border:1px solid var(--border); border-radius:20px; padding:5px 14px; font-size:10px; color:var(--t2); pointer-events:none; z-index:999; }

.buffer-legend { position:absolute; bottom:16px; left:270px; background:var(--map-legend-bg); backdrop-filter:blur(12px); border:1px solid rgba(255,77,106,.2); border-radius:var(--r-lg); padding:12px 14px; z-index:1000; min-width:170px; box-shadow:var(--sh-lg); }
.buffer-legend strong { display:block; font-family:'Space Grotesk',sans-serif; font-size:11px; font-weight:700; color:#ff4d6a; text-transform:uppercase; letter-spacing:.7px; margin-bottom:10px; padding-bottom:7px; border-bottom:1px solid rgba(255,77,106,.2); }
.bl-item { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--t2); padding:3px 0; }
.bl-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* ── Right Panel ── */
.right-panel { width:255px; flex-shrink:0; background:var(--surface); border-left:1px solid var(--border); overflow-y:auto; }
.rp-header { font-family:'Space Grotesk',sans-serif; font-size:11px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:.8px; padding:12px 16px 10px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:6px; }
.rp-header::before { content:''; width:3px; height:14px; border-radius:2px; background:var(--accent); box-shadow:0 0 8px var(--accent); flex-shrink:0; }
.rp-section { padding:12px 16px; border-bottom:1px solid var(--border); }
.rp-section-title { font-size:9px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:.8px; margin-bottom:10px; }
.rp-lga-name { font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:700; color:var(--accent); margin-bottom:12px; min-height:20px; }
.rp-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.rp-stat { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:8px 10px; }
.rp-stat-label { font-size:9px; color:var(--t3); text-transform:uppercase; letter-spacing:.4px; margin-bottom:4px; }
.rp-stat-value { font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700; color:var(--t1); }
.rp-stat-value.accent { color:var(--accent); }
.rp-stat-value.negative { color:var(--red); }
.rp-badge-wrap { display:flex; align-items:center; gap:6px; }

.stat-badge { display:inline-flex; align-items:center; padding:3px 12px; border-radius:999px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#fff; }
.stat-badge.critical { background:linear-gradient(135deg,#7c2d12,#9a1a1a); }
.stat-badge.high     { background:linear-gradient(135deg,#dc2626,#b91c1c); }
.stat-badge.elevated { background:linear-gradient(135deg,#f97316,#ea6a0a); }
.stat-badge.moderate { background:linear-gradient(135deg,#ca8a04,#a16207); }
.stat-badge.low      { background:linear-gradient(135deg,#16a34a,#15803d); }

.emission-row { display:flex; flex-direction:column; gap:6px; }
.emission-gas { display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--border); border-left:3px solid var(--border); border-radius:var(--r-md); padding:8px 10px; }
.emission-gas.ch4 { border-left-color:#3b82f6; }
.emission-gas.no2 { border-left-color:#10b981; }
.emission-gas.co  { border-left-color:#f59e0b; }
.eg-symbol { font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700; color:var(--t1); width:28px; flex-shrink:0; }
.eg-name   { font-size:9px; color:var(--t3); flex:1; }
.eg-value  { font-family:'Space Grotesk',sans-serif; font-size:11px; font-weight:700; color:var(--accent); }

.prox-row { display:flex; flex-direction:column; gap:7px; }
.prox-item { display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:8px 10px; }
.prox-icon { font-size:16px; flex-shrink:0; }

/* ── Bottom Charts ── */
.bottom-row { flex-shrink:0; background:var(--surface); border-top:1px solid var(--border); height:var(--charts-h); overflow:hidden; }
.charts-row { display:grid; grid-template-columns:repeat(3,1fr); height:100%; }
.chart-card { display:flex; flex-direction:column; min-width:0; min-height:0; border-right:1px solid var(--border); overflow:hidden; }
.chart-card:last-child { border-right:none; }
.chart-hdr { display:flex; justify-content:space-between; align-items:center; padding:7px 14px; border-bottom:1px solid var(--border); flex-shrink:0; font-family:'Space Grotesk',sans-serif; font-size:10px; font-weight:700; color:var(--t2); text-transform:uppercase; letter-spacing:.5px; }
.dl-btn { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--t2); width:22px; height:22px; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; flex-shrink:0; }
.dl-btn:hover { background:var(--accent); border-color:var(--accent); color:var(--bg); }
.chart-plot { position:relative; flex:1 1 0; min-width:0; min-height:0; overflow:hidden; }
.chart-card canvas { width:100% !important; height:100% !important; }

/* ── Leaflet overrides ── */
.leaflet-pane { z-index: 4 !important; }
.leaflet-top, .leaflet-bottom { z-index: 600 !important; }
.leaflet-container { background:var(--bg); font-family:'Inter',sans-serif; }
.leaflet-control-attribution { font-size:9px; background:rgba(7,12,20,.7) !important; color:var(--t3) !important; }
.leaflet-control-attribution a { color:var(--accent) !important; }
.leaflet-popup-content-wrapper { background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:var(--r-md) !important; box-shadow:var(--sh-lg) !important; color:var(--t1) !important; }
.leaflet-popup-tip { background:var(--surface) !important; }
.leaflet-popup-content { margin:10px 14px; font-size:12px; color:var(--t1); }
.places-label { background:transparent !important; border:none !important; box-shadow:none !important; font-size:9px !important; font-weight:500 !important; color:#f5f5f0 !important; text-shadow:-1px -1px 2px rgba(0,0,0,0.9),1px -1px 2px rgba(0,0,0,0.9),-1px 1px 2px rgba(0,0,0,0.9),1px 1px 2px rgba(0,0,0,0.9) !important; white-space:nowrap !important; }
.places-label::before { display:none !important; }
.leaflet-bar a { background:var(--surface) !important; border-color:var(--border) !important; color:var(--t1) !important; }
.leaflet-bar a:hover { background:var(--surface-2) !important; color:var(--accent) !important; }

/* ── Scrollbars ── */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:var(--t3); }

/* ══════════════════════════════════════════════════════
   MOBILE / RESPONSIVE
   ══════════════════════════════════════════════════════ */

/* These elements exist in DOM at all sizes; CSS shows/hides them */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.sidebar-overlay.visible { opacity: 1; pointer-events: auto; }

.mobile-menu-btn {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer; color: var(--t2); flex-shrink: 0;
  transition: all .2s;
}
.mobile-menu-btn:hover { border-color: var(--border-h); color: var(--accent); }

.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(56px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--sidebar);
  border-top: 1px solid var(--border);
  z-index: 1001;
  align-items: center; justify-content: space-around;
}
.mobile-nav-btn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  background: none; border: none;
  cursor: pointer; color: var(--t3);
  padding: 4px 6px; border-radius: var(--r-md);
  font-size: 8px; font-weight: 600;
  letter-spacing: .3px; text-transform: uppercase;
  min-width: 44px; transition: color .15s;
}
.mobile-nav-btn.active { color: var(--accent); }
.mobile-nav-btn svg { flex-shrink: 0; display: block; }

.mobile-info-btn {
  display: none;
  position: absolute;
  top: 10px; right: 10px;
  z-index: 450;
  width: 38px; height: 38px;
  background: var(--map-legend-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 50%;
  align-items: center; justify-content: center;
  cursor: pointer; color: var(--t2);
  box-shadow: var(--sh-md); transition: all .2s;
}
.mobile-info-btn.active { border-color: var(--border-h); color: var(--accent); }

/* ── Small desktop ≤1200px ── */
@media (max-width:1200px) {
  :root { --sidebar-w:180px; --charts-h:200px; }
}

/* ── Narrow tablet 641–768px ── */
@media (max-width:768px) and (min-width:641px) {
  :root { --charts-h: 185px; }
  .chart-hdr { padding: 5px 10px; }
  .chart-hdr span { font-size: 9px; }
}

/* ── Tablet 641–900px ── */
@media (max-width:1050px) {
  .sidebar { width:52px; }
  .brand-text, .nav-label, .sidebar-controls { display:none; }
  .right-panel { width:210px; }
  .topbar-kpis { display:none; }
}

/* ── Mobile ≤640px ──────────────────────────────────── */
@media (max-width:640px) {
  /* Use dynamic viewport height to avoid iOS browser-chrome cutoff */
  :root { --topbar-h: 54px; --mob-nav-h: calc(56px + env(safe-area-inset-bottom,0px)); }

  html, body { overflow: hidden; height: 100%; }

  /* On mobile, override the flex:1 sizing with the JS-measured real viewport height
     to handle iOS Safari's dynamic browser-chrome shrink/grow. */
  .app-shell {
    flex: none;
    height: var(--app-height, 100dvh);
  }

  /* ── Sidebar: hidden overlay drawer from left ── */
  .sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: min(280px, 88vw) !important;
    height: 100% !important;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
    z-index: 1002;
    will-change: transform;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .sidebar.mobile-open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,0.6); }

  /* Restore elements hidden at 900px breakpoint */
  .sidebar .brand-text    { display: flex !important; flex-direction: column; }
  .sidebar .nav-label     { display: inline !important; }
  .sidebar .sidebar-controls { display: flex !important; }

  /* Show mobile-only UI */
  .sidebar-overlay { display: block; }
  .mobile-menu-btn { display: flex; }
  .mobile-info-btn { display: flex; }
  .mobile-bottom-nav { display: flex; }

  /* ── Topbar: compact ── */
  .topbar { padding: 0 10px; gap: 8px; }
  .topbar-center { display: none !important; }
  .topbar-kpis   { display: none !important; }
  .page-title    { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .page-sub      { display: none; }
  .topbar-left   { min-width: 0; flex: 1; overflow: hidden; }
  .theme-switcher { gap: 2px; flex-shrink: 0; }
  .theme-btn { width: 26px; height: 26px; }

  /* ── Main area fills the space between topbar and bottom nav ── */
  .main-area { overflow: hidden; }

  /* ── Content row: full height map ── */
  .content-row { overflow: visible; }   /* allow fixed children to escape clipping */

  /* ── Right panel: bottom sheet ── */
  .right-panel {
    position: fixed !important;
    left: 0; right: 0;
    bottom: var(--mob-nav-h);
    top: auto;
    width: 100% !important;
    height: min(60vh, 480px);
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px 14px 0 0;
    transform: translateY(110%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    z-index: 800;
    overflow-y: auto;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.55);
    will-change: transform;
  }
  .right-panel.mobile-open { transform: translateY(0); }
  .right-panel::before {        /* drag-handle hint */
    content: '';
    display: block;
    width: 36px; height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.15);
    margin: 10px auto 4px;
  }

  /* ── SA / gas / landfills / admin panels: full-screen overlays ── */
  .sa-panel {
    position: fixed !important;
    top: var(--topbar-h); left: 0; right: 0;
    bottom: var(--mob-nav-h);
    width: 100% !important;
    height: auto !important;
    z-index: 900;
  }

  /* ── About overlay ── */
  #aboutOverlay {
    position: fixed !important;
    z-index: 1050 !important;
  }

  /* ── Bottom charts: swipeable horizontal carousel ── */
  .bottom-row {
    display: flex !important;
    flex-direction: column;
    height: calc(180px + var(--mob-nav-h));
    padding-bottom: var(--mob-nav-h);
    flex-shrink: 0;
    overflow: hidden;
  }
  .charts-row {
    display: flex !important;
    flex-direction: row;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .charts-row::-webkit-scrollbar { display: none; }
  .chart-card {
    flex: 0 0 calc(100vw - 16px);
    min-width: 0;
    scroll-snap-align: start;
    height: 100%;
    border-right: 1px solid var(--border);
  }
  .chart-hdr span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 32px);
  }

  /* ── Map legend: compact, auto-collapsed on mobile ── */
  .map-legend {
    bottom: 10px;
    left: 8px;
    max-width: min(220px, calc(100vw - 16px));
    padding: 8px 10px;
    max-height: 42px;
    overflow: hidden;
  }
  .map-legend #legendBody { display: none; }
  .map-legend .legend-toggle-btn { transform: rotate(-90deg); }
  /* when user explicitly opens it on mobile, allow scroll */
  .map-legend.mobile-expanded { max-height: 260px; overflow-y: auto; }
  .map-legend.mobile-expanded #legendBody { display: block; }
  .map-legend.mobile-expanded .legend-toggle-btn { transform: rotate(0deg); }
  /* legend is still shown when no SA/side panels overlay it on mobile (they're fixed) */
  .map-legend.panel-hidden { display: none !important; }
  .buffer-legend {
    left: 8px;
    bottom: 10px;
    min-width: 130px;
  }

  /* ── Leaflet controls: clear of the chart row ── */
  .leaflet-bottom { bottom: 8px !important; }

  /* ── Draw results: float above chart row ── */
  #drawResultsSection {
    bottom: 10px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
  }

  /* ── Map tip ── */
  .map-tip { bottom: 12px; font-size: 9px; }
}

/* ── Flat SVG icon sizing ────────────────────────────── */
.nav-icon svg       { display:block; flex-shrink:0; }
.strip-icon svg     { display:block; flex-shrink:0; }
.search-icon svg    { display:block; opacity:0.7; }
.prox-icon svg      { display:block; flex-shrink:0; }

/* nav-icon container needs fixed size */
.nav-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* strip-icon container */
.strip-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* prox-icon container */
.prox-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* search-icon container */
.search-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════
   SPATIAL ANALYSIS PANEL
   ════════════════════════════════════════════ */

.sa-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 400px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 30;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  box-shadow: -6px 0 24px rgba(0,0,0,0.5);
  overflow: hidden;
}

.sa-panel.open {
  transform: translateX(0);
}

/* Header */
.sa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sa-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .7px;
}

.sa-close {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .2s;
}
.sa-close:hover { background: var(--red-d); border-color: var(--red); }
.sa-close:hover svg { stroke: var(--red) !important; }

/* Tabs */
.sa-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}

.sa-tab {
  flex: 1;
  padding: 9px 4px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--t3);
  cursor: pointer;
  transition: all .18s;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.sa-tab:hover { color: var(--t2); }
.sa-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Content areas */
.sa-content {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  gap: 12px;
}
.sa-content.active { display: flex; }

.sa-desc {
  font-size: 11px;
  color: var(--t2);
  line-height: 1.6;
  background: var(--accent-d);
  border: 1px solid rgba(0,212,255,0.12);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.sa-desc strong { color: var(--accent); }

.sa-controls-row {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.sa-select {
  flex: 1;
  padding: 7px 24px 7px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--t1);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%233d5168' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color .2s;
}
.sa-select:focus { outline: none; border-color: var(--border-h); }

/* Table */
.sa-table-wrap {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.sa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.sa-table thead tr {
  background: var(--surface-3);
  position: sticky;
  top: 0;
  z-index: 1;
}

.sa-table th {
  padding: 8px 10px;
  text-align: left;
  font-size: 9px;
  font-weight: 700;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.sa-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--t2);
  font-size: 11px;
}

.sa-table tr:last-child td { border-bottom: none; }

.sa-table tbody tr {
  cursor: pointer;
  transition: background .15s;
}
.sa-table tbody tr:hover { background: var(--surface-2); }
.sa-table tbody tr:hover td { color: var(--t1); }

.sa-table .rank-num {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--t3);
  font-size: 10px;
}
.sa-table .rank-num.top3 { color: var(--accent); }

.sa-table .lga-name-cell {
  font-weight: 600;
  color: var(--t1);
  font-size: 11px;
}

.sa-table .val-cell {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  color: var(--accent);
  font-size: 11px;
}

.sa-table .vs-avg-pos { color: var(--red); font-size: 10px; font-weight: 600; }
.sa-table .vs-avg-neg { color: var(--green); font-size: 10px; font-weight: 600; }

.sa-badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.sa-badge.critical { background: #7c2d12; }
.sa-badge.high     { background: #dc2626; }
.sa-badge.elevated { background: #f97316; }
.sa-badge.moderate { background: #ca8a04; }
.sa-badge.low      { background: #16a34a; }

/* Gas correlation interpretation cards */
.corr-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  margin-bottom: 6px;
  font-size: 10px;
  line-height: 1.6;
  color: var(--t2);
}
.corr-card-lga {
  font-size: 11px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 4px;
}
.corr-card-note {
  color: var(--t3);
  font-style: italic;
  margin-top: 6px;
  font-size: 9px;
  border-top: 1px solid var(--border);
  padding-top: 5px;
  line-height: 1.5;
}

/* Z-score cell */
.z-score-high { color: var(--red); font-weight: 700; }
.z-score-med  { color: var(--amber); font-weight: 600; }

/* Anomaly count banner */
.sa-anomaly-count {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--red-d);
  border: 1px solid rgba(255,77,106,0.2);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: 12px;
  color: var(--t1);
  font-weight: 600;
  flex-shrink: 0;
}
.sa-anomaly-count .count-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--red);
  line-height: 1;
}

/* Buffer exposure */
.sa-exposure-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow-y: auto;
}

.exposure-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  transition: border-color .2s;
}
.exposure-item:hover { border-color: var(--border-h); }

.exposure-lga { font-size: 12px; font-weight: 600; color: var(--t1); }
.exposure-detail { font-size: 10px; color: var(--t2); margin-top: 2px; }

.exposure-zone {
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.zone-100  { background: rgba(0,229,160,0.15); color: #00e5a0; border: 1px solid rgba(0,229,160,0.3); }
.zone-500  { background: rgba(255,181,71,0.15); color: #ffb547; border: 1px solid rgba(255,181,71,0.3); }
.zone-1000 { background: rgba(255,77,106,0.15); color: #ff4d6a; border: 1px solid rgba(255,77,106,0.3); }
.zone-out  { background: var(--surface-3); color: var(--t3); border: 1px solid var(--border); }

/* YoY trend table */
.trend-up   { color: var(--red); font-weight: 600; font-size: 10px; }
.trend-down { color: var(--green); font-weight: 600; font-size: 10px; }
.trend-flat { color: var(--t3); font-size: 10px; }

/* SA panel is a flex sibling — it pushes the map/right-panel */

/* Scrollbar */
.sa-content::-webkit-scrollbar,
.sa-table-wrap::-webkit-scrollbar,
.sa-exposure-list::-webkit-scrollbar { width: 3px; }
.sa-content::-webkit-scrollbar-thumb,
.sa-table-wrap::-webkit-scrollbar-thumb,
.sa-exposure-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }

/* ════════════════════════════════════════════
   ABOUT MODAL
   ════════════════════════════════════════════ */
.about-overlay {
  position: fixed; inset: 0; z-index: 12000;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
}
.about-overlay.open { opacity: 1; pointer-events: all; }

.about-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  width: 640px; max-width: 94vw;
  max-height: 86vh; overflow-y: auto;
  box-shadow: var(--sh-lg), 0 0 0 1px rgba(0,212,255,0.08);
  position: relative;
  transform: translateY(16px);
  transition: transform 0.25s;
}
.about-overlay.open .about-modal { transform: translateY(0); }

.about-close {
  position: absolute; top: 14px; right: 14px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s; z-index: 1;
}
.about-close:hover { background: var(--red-d); border-color: var(--red); }

.about-header {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--surface), var(--surface-2));
}
.about-logo { width:40px; height:40px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.about-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px; font-weight: 700; color: var(--t1);
}
.about-title span { color: var(--accent); }
.about-version { font-size: 10px; color: var(--t3); margin-top: 3px; }

.about-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }

.about-section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px; font-weight: 700; color: var(--t3);
  text-transform: uppercase; letter-spacing: .8px;
  margin-bottom: 8px; padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px;
}
.about-section-title::before {
  content: ''; width: 12px; height: 2px;
  background: var(--accent); border-radius: 1px;
}
.about-section p { font-size: 11px; color: var(--t2); line-height: 1.55; }

/* Objectives */
.about-objectives { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.about-obj-item {
  display: flex; gap: 8px; align-items: flex-start;
  background: transparent; border: 0; border-top: 1px solid var(--border);
  border-radius: 0; padding: 7px 0;
  font-size: 10px; line-height: 1.45; color: var(--t2);
}
.about-obj-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px; font-weight: 800; color: var(--accent);
  flex-shrink: 0; min-width: 18px;
}

/* Grid */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Data list */
.about-data-list { display: flex; flex-direction: column; gap: 6px; }
.about-data-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 2px; background: transparent;
  border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
}
.about-data-label { font-size: 10px; color: var(--t3); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.about-data-val { font-size: 11px; color: var(--t1); font-weight: 500; }

/* Gas list */
.about-gas-list { display: flex; flex-direction: column; gap: 6px; }
.about-gas {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: 0;
  border-left: 2px solid var(--border); border-radius: 0; padding: 6px 8px;
}
.about-gas.ch4 { border-left-color: #3b82f6; }
.about-gas.no2 { border-left-color: #10b981; }
.about-gas.co  { border-left-color: #f59e0b; }
.about-gas-sym { font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 800; color: var(--t1); width: 32px; flex-shrink: 0; }
.about-gas-name { font-size: 11px; font-weight: 600; color: var(--t1); }
.about-gas-unit { font-size: 10px; color: var(--t3); }

/* Methodology steps */
.about-method-steps {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.about-step {
  flex: 1; min-width: 100px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 12px; text-align: center;
}
.about-step-icon { font-size: 20px; margin-bottom: 6px; }
.about-step-label { font-size: 11px; font-weight: 700; color: var(--t1); margin-bottom: 4px; }
.about-step-desc { font-size: 9px; color: var(--t3); line-height: 1.4; }
.about-step-arrow { color: var(--accent); font-size: 16px; flex-shrink: 0; }

/* Footer */
.about-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0 0; border-top: 1px solid var(--border);
}
.about-org { font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700; color: var(--t1); }
.about-sub { font-size: 10px; color: var(--t3); margin-top: 2px; }
.about-year { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 800; color: var(--accent); }

@media (max-width:640px) {
  .about-modal { width:94vw; max-height:90vh; }
  .about-header { padding:16px 18px 12px; }
  .about-body { padding:14px 18px; gap:12px; }
  .about-grid,
  .about-objectives { grid-template-columns:1fr; }
}

/* ── Landfill Cards ──────────────────────────────────── */
.lf-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .2s;
}
.lf-card:hover { border-color: var(--border-h); cursor: pointer; }
.lf-card--active { border-color: #00d4ff !important; box-shadow: 0 0 0 2px rgba(0,212,255,0.25); }

.lf-card-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.lf-name  { font-family: 'Space Grotesk',sans-serif; font-size: 13px; font-weight: 700; color: var(--accent); }
.lf-meta  { font-size: 10px; color: var(--t2); margin-top: 3px; }
.lf-coords{ font-size: 9px;  color: var(--t3); margin-top: 2px; font-family: monospace; }

.lf-gas-row {
  display: grid; grid-template-columns: repeat(4,1fr);
  border-bottom: 1px solid var(--border);
}
.lf-gas {
  padding: 8px 10px; text-align: center;
  border-right: 1px solid var(--border);
  border-left: 3px solid transparent;
}
.lf-gas:last-child { border-right: none; }
.lf-gas.ch4 { border-left-color: #3b82f6; }
.lf-gas.no2 { border-left-color: #10b981; }
.lf-gas.co  { border-left-color: #f59e0b; }
.lf-gas.isi { border-left-color: var(--accent); }
.lf-gas-sym  { font-size: 9px;  font-weight: 700; color: var(--t3); text-transform: uppercase; margin-bottom: 3px; }
.lf-gas-val  { font-family: 'Space Grotesk',sans-serif; font-size: 11px; font-weight: 700; color: var(--t1); }
.lf-gas-unit { font-size: 8px; color: var(--t3); margin-top: 2px; }

.lf-buffer-row {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
}
.lf-buf {
  display: flex; flex-direction: column; align-items: center;
  padding: 4px 8px; border-radius: var(--r-sm);
  min-width: 44px;
}
.lf-buf span { font-family: 'Space Grotesk',sans-serif; font-size: 14px; font-weight: 800; }
.lf-buf small { font-size: 8px; margin-top: 1px; }
.lf-buf.zone-100  { background: rgba(0,229,160,0.12); color: #00e5a0; }
.lf-buf.zone-500  { background: rgba(255,181,71,0.12); color: #ffb547; }
.lf-buf.zone-1000 { background: rgba(255,77,106,0.12); color: #ff4d6a; }
.lf-buf-label { font-size: 10px; color: var(--t3); flex: 1; text-align: right; }

/* ── Research questions list ─────────────────────────── */
.about-questions { display: flex; flex-direction: column; gap: 6px; }
.about-q-item {
  font-size: 11px; color: var(--t2); line-height: 1.5;
  padding: 7px 12px 7px 14px;
  border-left: 2px solid var(--border);
  background: var(--surface-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  transition: border-color .2s;
}
.about-q-item:hover { border-left-color: var(--accent); color: var(--t1); }
.about-q-item::before {
  content: 'Q';
  font-size: 8px; font-weight: 800;
  color: var(--accent); margin-right: 6px;
  font-family: 'Space Grotesk', sans-serif;
}

/* ── YoY Trend year range sliders ─────────────────────── */
.trend-year-range {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 9px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.trend-year-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--t2);
}
.trend-year-labels strong { color: var(--accent); font-family: 'Space Grotesk', sans-serif; }
.trend-sliders { display: flex; flex-direction: column; gap: 4px; }
.trend-slider-wrap { display: flex; align-items: center; gap: 7px; min-height:12px; }
.trend-slider-lbl { font-size: 8px; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: .4px; width: 24px; flex-shrink: 0; }
.trend-slider {
  flex: 1; height: 3px; border-radius: 2px;
  background: var(--surface-3); outline: none;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.trend-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 11px; height: 11px;
  border-radius: 50%; background: var(--accent);
  cursor: pointer; box-shadow: 0 0 4px color-mix(in srgb, var(--accent) 65%, transparent);
  transition: transform .2s;
}
.trend-slider::-webkit-slider-thumb:hover { transform: scale(1.25); }
.trend-slider::-moz-range-thumb {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); cursor: pointer; border: none;
}

/* ── Gas Emissions Panel ─────────────────────────────── */
.gas-content {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  gap: 12px;
}
.gas-content.active { display: flex; }

.gas-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  flex-shrink: 0;
}
.gas-sum-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.gas-sum-sym  { font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:800; }
.gas-sum-val  { font-family:'Space Grotesk',sans-serif; font-size:12px; font-weight:700; color:var(--t1); }
.gas-sum-unit { font-size:9px; color:var(--t3); }
.gas-sum-chg  { font-size:10px; font-weight:700; margin-top:2px; }

/* ── Landfill Status Badges ───────────────────────────── */
.lf-status {
  display: inline-flex; align-items: center;
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; padding: 2px 8px;
  border-radius: 99px; margin-top: 5px;
  border: 1px solid transparent;
}
.lf-status-active       { background:rgba(22,163,74,0.12);  color:#16a34a; border-color:rgba(22,163,74,0.3); }
.lf-status-scheduled    { background:rgba(249,115,22,0.12); color:#f97316; border-color:rgba(249,115,22,0.3); }
.lf-status-decommission { background:rgba(202,138,4,0.12);  color:#ca8a04; border-color:rgba(202,138,4,0.3); }
.lf-status-closed       { background:rgba(100,116,139,0.12);color:#64748b; border-color:rgba(100,116,139,0.3); }
.lf-status-review       { background:rgba(59,130,246,0.12); color:#3b82f6; border-color:rgba(59,130,246,0.3); }

/* ── Draw Toolbar ──────────────────────────────────────────── */
@keyframes pulse {
  0%,100% { opacity:1; }
  50%      { opacity:0.3; }
}

.draw-toolbar {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 4px;
  box-shadow: var(--sh-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.draw-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--t2);
  cursor: pointer;
  transition: all .15s;
  padding: 0;
}
.draw-btn:hover {
  background: var(--accent-d);
  border-color: rgba(0,212,255,0.25);
  color: var(--accent);
}
.draw-btn.active {
  background: var(--accent-d);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 8px rgba(0,212,255,0.2);
}
.draw-sep { height:1px; background:var(--border); margin:2px 2px; }

/* Keep raster analysis actions visually distinct from general map tools. */
.raster-editor-toolbar {
  border-left:3px solid var(--green) !important;
}
.map-utility-toolbar { margin-top:0 !important; }
.map-utility-toolbar .draw-btn { width:28px; height:28px; }

/* suppress default Leaflet.draw tooltip arrow colour leak */
.leaflet-draw-tooltip {
  background: rgba(7,12,20,0.92) !important;
  border: 1px solid rgba(0,212,255,0.3) !important;
  color: #00d4ff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
.leaflet-draw-tooltip::before { border-top-color: rgba(0,212,255,0.3) !important; }

/* ── Draw Results Panel ────────────────────────────────────── */
.draw-loading {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--t2); padding: 8px 0;
}
.draw-pulse {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent);
  flex-shrink: 0; animation: pulse 1.5s infinite;
}

.draw-point-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px; margin-top: 6px;
}
.draw-stat-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-top: 2px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px; text-align: center;
}
.draw-stat-box.ch4 { border-top-color: #3b82f6; }
.draw-stat-box.no2 { border-top-color: #10b981; }
.draw-stat-box.co  { border-top-color: #f59e0b; }
.draw-stat-box.isi { border-top-color: #a855f7; }
.draw-gas-sym  { font-size:11px; font-weight:800; color:var(--t1); margin-bottom:3px; }
.draw-gas-val  { font-size:11px; font-weight:700; color:var(--accent); font-family:'Space Grotesk',sans-serif; }
.draw-gas-unit { font-size:9px; color:var(--t3); margin-top:1px; }

/* ── LGA permanent labels ────────────────────────────── */
.lga-label {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-shadow:
    -1px -1px 2px rgba(0,0,0,0.9),
     1px -1px 2px rgba(0,0,0,0.9),
    -1px  1px 2px rgba(0,0,0,0.9),
     1px  1px 2px rgba(0,0,0,0.9);
  pointer-events: none;
  white-space: nowrap;
  text-align: center;
}
.lga-label::before { display: none !important; }

/* GEE LGA overlay labels — slightly larger, cyan-tinted for raster context */
.gee-lga-label {
  font-size: 8px !important;
  font-weight: 800 !important;
  color: #e0f8ff !important;
  letter-spacing: 0.3px;
  text-shadow:
    -1px -1px 3px rgba(0,0,0,1),
     1px -1px 3px rgba(0,0,0,1),
    -1px  1px 3px rgba(0,0,0,1),
     1px  1px 3px rgba(0,0,0,1),
     0    0   6px rgba(0,0,0,0.8) !important;
}



/* ── Clickable status badge ───────────────────────────── */
.lf-status-link {
  cursor: pointer;
  transition: opacity .2s, transform .2s;
}
.lf-status-link:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

/* GEE live indicator pulse */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ── Theme Switcher ───────────────────────────────────── */
.theme-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 4px 6px;
  flex-shrink: 0;
}
.theme-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .18s;
  color: var(--t2);
}
.theme-btn:hover { background: var(--surface-3); color: var(--t1); }
.theme-btn.active {
  background: var(--accent-d);
  border-color: var(--border-h);
  color: var(--accent);
  box-shadow: var(--accent-g);
}
.theme-btn svg { display: block; flex-shrink: 0; }

/* Light theme: logo needs a dark backing so it remains visible on white sidebar */
[data-theme="light"] .brand-icon {
  background: linear-gradient(135deg, #0a1120, #0d1f3c);
  border-radius: 10px;
  padding: 4px;
}
/* Light theme: fix Leaflet map tip */
[data-theme="light"] .map-tip {
  background: rgba(255,255,255,0.92);
  border-color: rgba(0,0,0,0.12);
  color: var(--t2);
}
/* Light theme: Leaflet controls */
[data-theme="light"] .leaflet-bar a {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--t1) !important;
}
[data-theme="light"] .leaflet-control-attribution {
  background: rgba(255,255,255,0.85) !important;
}
/* Modern theme: checked toggle uses accent color */
[data-theme="modern"] .layer-toggle input:checked ~ .toggle-track {
  border-color: rgba(168,85,247,.4);
}

/* ═══════════════════════════════════════════════════════════════
   ENVRA BENTO — reference-aligned desktop presentation
   Existing IDs and interaction hooks are intentionally preserved.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --sidebar-w:80px;
  --topbar-h:185px;
  --charts-h:311px;
  --map-h:497px;
  --rhs-pane-w:404px;
  --rhs-pane-h:calc(var(--map-h) + 296px);
  --r-sm:8px;
  --r-md:14px;
  --r-lg:22px;
}

[data-theme="light"] {
  --bg:#f6f8fb;
  --sidebar:#ffffff;
  --surface:#ffffff;
  --surface-2:#f5f7fa;
  --surface-3:#e8edf3;
  --border:#dce4ec;
  --border-h:#20bf66;
  --accent:#20bf66;
  --accent-d:#dff8e9;
  --accent-g:none;
  --green:#20bf66;
  --red:#ff5e4d;
  --amber:#ff7417;
  --t1:#111827;
  --t2:#70829b;
  --t3:#91a0b5;
  --sidebar-w:80px;
  --topbar-h:185px;
  --charts-h:311px;
  --map-h:497px;
  --r-sm:8px;
  --r-md:14px;
  --r-lg:28px;
  --sh-md:0 2px 8px rgba(30,53,76,.035);
  --sh-lg:0 12px 35px rgba(30,53,76,.10);
  --map-legend-bg:rgba(255,255,255,.93);
}

html, body { height:100%; background:var(--bg); }
body { color:var(--t1); }
.app-shell { min-height:100%; overflow:hidden; }

/* slim icon rail */
.sidebar {
  position:relative;
  width:var(--sidebar-w);
  min-width:var(--sidebar-w);
  background:#fff;
  border-right:1px solid #dce4ec;
  overflow:hidden;
  z-index:1000;
}
.sidebar::before { display:none; }
.sidebar-brand {
  position:fixed;
  z-index:1100;
  top:31px;
  left:calc(var(--sidebar-w) + 32px);
  width:170px;
  height:56px;
  padding:0;
  gap:8px;
  border:0;
  background:transparent;
}
.brand-logo {
  display:block;
  width:170px;
  height:56px;
  object-fit:contain;
  object-position:left center;
}
.about-brand-logo {
  display:block;
  width:118px;
  height:40px;
  object-fit:contain;
  object-position:left center;
  flex-shrink:0;
}
[data-theme="light"] .brand-icon,
.brand-icon {
  width:38px;
  height:44px;
  padding:0;
  border-radius:0;
  background:transparent;
}
.brand-icon svg { width:38px; height:44px; display:block; }
.brand-text { position:relative; align-self:center; }
.brand-title {
  font-family:'Inter',sans-serif;
  font-size:30px;
  line-height:.82;
  letter-spacing:-2.1px;
  color:#2d9c6d;
  font-weight:700;
}
.brand-sub {
  position:absolute;
  top:25px;
  left:3px;
  color:#274941;
  font-size:9px;
  line-height:1;
  letter-spacing:0;
  font-weight:600;
}
.nav-list {
  padding:0 8px;
  margin-top:min(29vh,326px);
  gap:20px;
}
.nav-item {
  width:64px;
  height:64px;
  padding:0;
  justify-content:center;
  border:0;
  border-radius:16px;
  color:#70829b;
  background:transparent;
}
.nav-item:hover { background:#f3faf6; color:#20bf66; }
.nav-item.active { background:#dff8e9; color:#20bf66; border:0; box-shadow:none; }
.nav-item .nav-icon { display:flex; align-items:center; justify-content:center; }
.nav-item .nav-icon svg { width:21px; height:21px; stroke:currentColor !important; }
.nav-label { display:none; }

/* Desktop icon-rail tooltips */
@media (min-width:1051px) {
  .sidebar,
  .nav-list { overflow:visible; }

  .nav-item { position:relative; }
  .nav-item .nav-label {
    display:block;
    position:absolute;
    z-index:1300;
    left:calc(100% + 12px);
    top:50%;
    min-width:max-content;
    padding:7px 10px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface);
    box-shadow:var(--sh-md);
    color:var(--t1);
    font-size:11px;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate(-4px,-50%);
    transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
  }
  .nav-item .nav-label::before {
    content:'';
    position:absolute;
    right:100%;
    top:50%;
    border:5px solid transparent;
    border-right-color:var(--surface);
    transform:translateY(-50%);
  }
  .nav-item:hover .nav-label,
  .nav-item:focus-within .nav-label {
    opacity:1;
    visibility:visible;
    transform:translate(0,-50%);
  }
}

#sidebarUser { display:none !important; }
.sidebar-help {
  position:absolute;
  left:19px;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#70829b;
  cursor:pointer;
  transition:color .15s, background .15s;
}
.sidebar-help { bottom:25px; }
.sidebar-help:hover { color:#20bf66; background:#effaf4; }

/* header + KPI bento row */
.main-area {
  position:relative;
  flex:1;
  min-width:0;
  height:100vh;
  overflow-x:hidden;
  overflow-y:auto;
  display:block;
  padding-bottom:12px;
}
.topbar {
  height:var(--topbar-h);
  min-height:var(--topbar-h);
  padding:27px 32px 20px;
  align-items:flex-start;
  justify-content:center;
  background:#f6f8fb;
  border:0;
  box-shadow:none;
  position:relative;
}
.topbar::before { display:none; }
.topbar-left { display:none; }
.topbar-center { flex:0 1 380px; margin-top:12px; }
.search-box {
  width:100%;
  height:36px;
  gap:8px;
  padding:0 15px;
  border-radius:24px;
  background:#fff;
  border:1px solid #dce4ec;
  box-shadow:0 1px 3px rgba(30,53,76,.025);
}
.search-box:focus-within { border-color:#8bdcb0; box-shadow:0 0 0 3px rgba(32,191,102,.09); }
.search-icon { display:flex; opacity:1; }
.search-icon svg { width:15px; height:15px; stroke:#70829b !important; }
.search-input { width:100%; color:#182133; font-size:12px; font-weight:500; }
.search-input::placeholder { color:#9aabc0; }
.search-btn { display:none; }
.export-report-btn {
  position:absolute;
  right:32px;
  top:39px;
  display:flex;
  align-items:center;
  gap:8px;
  height:36px;
  padding:0 18px;
  border:0;
  border-radius:24px;
  background:#20bf66;
  color:#fff;
  font:700 11px 'Inter',sans-serif;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(32,191,102,.16);
}
.export-report-btn:hover { background:#18aa58; transform:translateY(-1px); }
.theme-switcher {
  display:flex;
  position:absolute;
  right:172px;
  top:39px;
  height:36px;
  padding:4px 6px;
  background:#fff;
  border-color:#dce4ec;
  z-index:2;
}
.theme-btn { width:26px; height:26px; }
#gee-indicator { position:absolute; top:104px; right:43px; }
.topbar-kpis {
  position:absolute;
  left:32px;
  right:32px;
  bottom:0;
  height:88px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  border:0;
}
.strip-card {
  height:88px;
  min-width:0;
  padding:17px 16px;
  align-items:flex-start;
  justify-content:space-between;
  border:1px solid #dce4ec !important;
  border-radius:18px;
  background:#fff;
  box-shadow:0 2px 6px rgba(30,53,76,.025);
}
.strip-card:hover { background:#fff; box-shadow:0 8px 22px rgba(30,53,76,.07); }
.strip-card::after { display:none !important; }
.strip-card > div:not(.strip-icon) { display:flex; flex-direction:column-reverse; align-items:flex-start; align-self:stretch; justify-content:space-between; min-width:0; }
.strip-card .strip-icon { order:2; margin-top:0; }
.strip-card .strip-icon svg { width:17px; height:17px; stroke:#20bf66 !important; }
.strip-card.danger .strip-icon svg,
.strip-card.accent .strip-icon svg { stroke:#ff7417 !important; }
.strip-val {
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  font-family:'Inter',sans-serif;
  font-size:22px;
  line-height:1;
  letter-spacing:-.9px;
  color:#111827;
}
.strip-lbl {
  font-size:11.5px;
  line-height:1.15;
  color:#70829b;
  text-transform:none;
  letter-spacing:0;
  font-weight:600;
}
.strip-card.secondary-kpi { display:none; }
.strip-card.accent { order:3; }
.strip-card:not(.danger):not(.safe):not(.accent):has(#yoy-icon) { order:4; }

/* map, controls, and inspector */
.content-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--rhs-pane-w);
  gap:24px;
  padding:20px 32px;
  overflow:visible;
  align-items:stretch;
}
.map-stack {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:16px;
  container-type:inline-size;
  container-name:map-charts;
}
.map-wrap {
  flex:0 0 var(--map-h);
  height:var(--map-h);
  min-height:var(--map-h);
  border:1px solid #dce4ec;
  border-radius:22px;
  overflow:hidden;
  background:#dfeaf0;
  box-shadow:0 2px 6px rgba(30,53,76,.04);
}
#map { height:100%; }
.map-layer-card {
  position:absolute;
  z-index:500;
  left:14px;
  top:10px;
  width:190px;
  padding:10px 10px 9px;
  border:1px solid rgba(220,228,236,.9);
  border-radius:12px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  box-shadow:0 10px 24px rgba(30,53,76,.10);
}
.layer-card-heading { display:flex; justify-content:space-between; align-items:center; padding-bottom:7px; color:#60748d; font-size:7px; font-weight:800; text-transform:uppercase; letter-spacing:.45px; }
.layer-card-heading span:first-child { display:flex; align-items:center; gap:6px; }
.map-layer-card .layer-toggles { gap:2px; }
.map-layer-card .layer-toggle,
.map-layer-card .layer-fixed-active { min-height:21px; padding:3px 0; justify-content:space-between; gap:6px; }
.map-layer-card .toggle-label { color:#334155; font-size:8px; font-weight:600; order:1; }
.map-layer-card .layer-toggle input { order:2; }
.map-layer-card .toggle-track,
.map-layer-card .fixed-active-dot { order:3; width:22px; height:12px; background:#dce5ef; border:0; }
.map-layer-card .toggle-track::after,
.map-layer-card .fixed-active-dot::after { width:8px; height:8px; top:2px; left:2px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.map-layer-card .layer-toggle input:checked ~ .toggle-track,
.map-layer-card .fixed-active-dot { background:#20bf66; }
.map-layer-card .layer-toggle input:checked ~ .toggle-track::after,
.map-layer-card .fixed-active-dot::after { left:12px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.map-layer-filter { border-top:1px solid #e8edf3; margin-top:6px; padding-top:7px; }
.map-layer-filter .ctrl-label { margin:0 0 5px; color:#8292a8; font-size:6.5px; }
.map-layer-filter .ctrl-select { height:25px; font-size:8px; padding:0 22px 0 8px; background-color:#fff; }
.map-filter-stack {
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid #e8edf3;
}
.map-filter-title {
  display:flex;
  align-items:center;
  gap:6px;
  color:#334155;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.35px;
}
.map-filter-stack label { display:flex; flex-direction:column; gap:4px; }
.map-filter-stack .ctrl-label,
.map-basemap-control .ctrl-label {
  color:#8292a8;
  font-size:8px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.35px;
}
.map-filter-stack .ctrl-select {
  width:100%;
  height:29px;
  padding:0 24px 0 9px;
  border-color:#e4eaf0;
  background-color:#fff;
  font-size:8.5px;
}
.map-filter-stack :is(.apply-filter-btn, .reset-filter-btn) {
  display:block;
  width:100%;
  height:29px;
  margin:0;
}
.map-filter-stack .reset-filter-btn {
  border:1px solid #e4eaf0;
  background:#f7f9fb;
}
.live-monitor-card {
  position:absolute;
  z-index:500;
  top:10px;
  right:14px;
  width:180px;
  padding:14px 15px;
  border:1px solid rgba(255,255,255,.75);
  border-radius:16px;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(30,53,76,.08);
}
.live-monitor-card > span { display:block; color:#263448; font-size:8px; font-weight:800; text-transform:uppercase; margin-bottom:6px; }
.live-monitor-card strong { display:block; font-size:19px; line-height:1.1; letter-spacing:-.4px; }
.live-monitor-card strong sub { font-size:10px; }
.live-monitor-card small { display:flex; align-items:center; gap:6px; margin-top:7px; color:#70829b; font-size:9px; }
.live-monitor-card small i { width:7px; height:7px; border-radius:50%; background:#20bf66; }
.map-basemap-control {
  position:absolute;
  z-index:500;
  top:104px;
  right:14px;
  width:180px;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:10px 12px;
  border:1px solid rgba(220,228,236,.9);
  border-radius:12px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  box-shadow:0 8px 20px rgba(30,53,76,.09);
}
.map-basemap-control .ctrl-select {
  width:100%;
  height:28px;
  padding:0 24px 0 9px;
  border-color:#e4eaf0;
  background-color:#fff;
  font-size:8.5px;
}
/* Guided entry flow */
.access-wizard-overlay {
  position:fixed;
  inset:0;
  z-index:5000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(11,18,28,.36);
  backdrop-filter:blur(3px) saturate(92%);
  -webkit-backdrop-filter:blur(3px) saturate(92%);
}
.access-wizard-overlay.open { display:flex; }
body.access-wizard-open { overflow:hidden; }
body.access-wizard-open .app-shell { pointer-events:none; user-select:none; }
.access-wizard-card {
  width:min(680px, calc(100vw - 32px));
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
  padding:30px 32px 26px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:28px;
  color:#172033;
  background:rgba(247,249,251,.78);
  backdrop-filter:blur(24px) saturate(135%);
  -webkit-backdrop-filter:blur(24px) saturate(135%);
  box-shadow:0 28px 80px rgba(8,15,28,.34);
}
.access-wizard-progress { height:5px; overflow:hidden; border-radius:99px; background:#dce4ec; }
.access-wizard-progress span { display:block; width:25%; height:100%; border-radius:inherit; background:#20bf66; transition:width .25s ease; }
.access-wizard-step-label { margin-top:10px; color:#20a95b; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; }
.access-wizard-step { display:none; padding-top:22px; }
.access-wizard-step.active { display:block; }
.access-wizard-step h2 { margin:0; color:#172033; font:800 28px/1.12 'Inter',sans-serif; letter-spacing:-.8px; }
.access-wizard-step > p { margin:8px 0 22px; color:#64748b; font-size:13px; line-height:1.45; }
.access-option-grid { display:grid; gap:12px; }
.access-option-grid.two-up { grid-template-columns:repeat(2,minmax(0,1fr)); }
.access-option-grid.three-up { grid-template-columns:repeat(3,minmax(0,1fr)); }
.access-option {
  min-height:92px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  border:1px solid #dce4ec;
  border-radius:16px;
  color:#172033;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(10px);
  text-align:left;
  cursor:pointer;
  transition:border-color .16s, box-shadow .16s, transform .16s, background .16s;
}
.access-option:hover { transform:translateY(-1px); border-color:#9ddfba; box-shadow:0 8px 20px rgba(30,53,76,.08); }
.access-option.selected { border-color:#20bf66; background:#effbf4; box-shadow:0 0 0 3px rgba(32,191,102,.12); }
.access-option-icon { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border:1px solid #dce4ec; border-radius:12px; color:#55708e; background:#f8fafc; font-size:20px; font-weight:800; }
.access-option strong { display:block; font-size:15px; line-height:1.2; }
.access-option small { display:block; margin-top:5px; color:#64748b; font-size:11px; line-height:1.4; }
.access-option.compact { min-height:112px; flex-direction:column; align-items:flex-start; gap:6px; }
.access-option.compact strong { font-size:22px; }
.gas-dot { width:10px; height:10px; border-radius:50%; }
.gas-dot.ch4 { background:#20bf66; }
.gas-dot.no2 { background:#ff7417; }
.gas-dot.co { background:#3c86e8; }
.access-lga-field { display:flex; flex-direction:column; gap:7px; margin-top:14px; color:#64748b; font-size:10px; font-weight:800; text-transform:uppercase; }
.access-lga-field[hidden] { display:none; }
.access-lga-field select { width:100%; height:42px; padding:0 36px 0 12px; border:1px solid #dce4ec; border-radius:12px; color:#172033; background:rgba(255,255,255,.82); font:600 12px 'Inter',sans-serif; }
.access-state-field { margin-top:20px; }
.access-state-field select:focus { border-color:#20bf66; box-shadow:0 0 0 3px rgba(32,191,102,.12); outline:none; }
.access-availability-note {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  padding:11px 13px;
  border:1px solid rgba(32,191,102,.3);
  border-radius:12px;
  color:#1f5133;
  background:rgba(236,253,245,.72);
}
.access-availability-note strong { font-size:10px; }
.access-availability-note span { color:#169653; font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.45px; }
.access-availability-note.unavailable { border-color:#dce4ec; color:#64748b; background:rgba(248,250,252,.68); }
.access-availability-note.unavailable span { color:#94a3b8; }
.access-wizard-summary { min-height:18px; margin-top:18px; color:#71839a; font-size:10px; font-weight:600; }
.access-wizard-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:18px; }
.access-wizard-actions > div { display:flex; gap:10px; }
.access-back, .access-next { height:42px; padding:0 20px; border-radius:12px; font:700 12px 'Inter',sans-serif; cursor:pointer; }
.access-back { border:1px solid #dce4ec; color:#475569; background:#fff; }
.access-next { min-width:126px; border:0; color:#fff; background:#20bf66; }
.access-next:disabled { color:#94a3b8; background:#e2e8f0; cursor:not-allowed; }
.map-setup-button { height:27px; border:0; color:#5d7189; background:transparent; font:700 8px 'Inter',sans-serif; cursor:pointer; }
.map-setup-button:hover { color:#20bf66; }

/* Contextual workspace actions */
.next-action-bar {
  display:none;
  position:relative;
  z-index:850;
  min-height:58px;
  grid-template-columns:auto minmax(142px,auto) minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:9px 12px;
  border:1px solid #dce4ec;
  border-radius:16px;
  background:rgba(255,255,255,.92);
  box-shadow:0 7px 22px rgba(30,53,76,.07);
  backdrop-filter:blur(16px) saturate(125%);
}
body.workspace-focused .next-action-bar { display:grid; }
.project-new-button {
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 14px;
  border:0;
  border-radius:20px;
  color:#fff;
  background:#20bf66;
  box-shadow:0 7px 16px rgba(32,191,102,.18);
  font:750 9.5px 'Inter',sans-serif;
  white-space:nowrap;
  cursor:pointer;
}
.project-new-button:hover { background:#18a958; transform:translateY(-1px); }
.next-action-prompt { min-width:158px; padding-right:14px; border-right:1px solid #e4eaf0; }
.next-action-prompt span { display:block; margin-bottom:2px; color:#20ad5f; font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.65px; }
.next-action-prompt strong { display:block; color:#182133; font-size:11px; line-height:1.3; }
.next-action-prompt small { display:block; max-width:210px; margin-top:2px; overflow:hidden; color:#74869c; font-size:7.5px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.next-action-buttons { min-width:0; display:flex; align-items:center; justify-content:center; gap:7px; }
.next-action-button {
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 11px;
  border:1px solid #dce4ec;
  border-radius:10px;
  color:#52657c;
  background:#f8fafc;
  font:700 9px 'Inter',sans-serif;
  white-space:nowrap;
  cursor:pointer;
  transition:border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}
.next-action-button:hover { color:#179f54; border-color:#9eddb9; background:#f0fbf5; transform:translateY(-1px); }
.next-action-button.active { color:#138f4a; border-color:#69ce94; background:#e7f9ef; }
.next-action-button.next-action-primary { color:#fff; border-color:#20bf66; background:#20bf66; }
.next-action-button.next-action-primary:hover { color:#fff; border-color:#18a958; background:#18a958; }
.next-action-button svg { flex:0 0 auto; }
.action-caret { margin-left:1px; font-size:9px; }
.next-action-menu-wrap { position:relative; }
.analysis-action-menu {
  position:absolute;
  top:calc(100% + 9px);
  left:50%;
  width:238px;
  padding:8px;
  border:1px solid #dce4ec;
  border-radius:14px;
  background:rgba(255,255,255,.97);
  box-shadow:0 18px 48px rgba(20,35,54,.18);
  backdrop-filter:blur(18px);
  transform:translateX(-50%);
}
.analysis-action-menu[hidden] { display:none; }
.analysis-menu-label { padding:7px 9px 4px; color:#8b9bb0; font-size:7.5px; font-weight:800; text-transform:uppercase; letter-spacing:.7px; }
.analysis-action-menu button { width:100%; display:grid; grid-template-columns:76px 1fr; gap:8px; padding:8px 9px; border:0; border-radius:9px; color:#223047; background:transparent; text-align:left; cursor:pointer; }
.analysis-action-menu button:hover { background:#effaf4; }
.analysis-action-menu button:disabled { opacity:.42; cursor:not-allowed; }
.analysis-action-menu button:disabled:hover { background:transparent; }
.analysis-action-menu strong { font-size:9.5px; }
.analysis-action-menu small { color:#7c8da3; font-size:8.5px; line-height:1.3; }
.next-action-utilities { display:flex; flex-direction:column; align-items:flex-end; gap:3px; padding-left:12px; border-left:1px solid #e4eaf0; }
.next-action-utilities button { padding:2px 0; border:0; color:#74869c; background:transparent; font:700 8px 'Inter',sans-serif; white-space:nowrap; cursor:pointer; }
.next-action-utilities button:hover { color:#20a95b; }

.access-chart-choice { display:flex; align-items:center; gap:11px; margin-top:14px; padding:12px 13px; border:1px solid #dce4ec; border-radius:13px; color:#26344b; background:rgba(255,255,255,.64); cursor:pointer; }
.access-chart-choice input { position:absolute; opacity:0; pointer-events:none; }
.access-chart-switch { position:relative; width:34px; height:19px; flex:0 0 auto; border-radius:99px; background:#cbd5e1; transition:background .2s ease; }
.access-chart-switch::after { content:''; position:absolute; top:3px; left:3px; width:13px; height:13px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.2); transition:transform .2s ease; }
.access-chart-choice input:checked + .access-chart-switch { background:#20bf66; }
.access-chart-choice input:checked + .access-chart-switch::after { transform:translateX(15px); }
.access-chart-choice strong { display:block; font-size:10px; }
.access-chart-choice small { display:block; margin-top:2px; color:#71839a; font-size:8.5px; line-height:1.35; }
.access-subheading { margin:17px 0 8px; color:#7b8ba0; font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.7px; }
.access-option.compact-format { min-height:68px; padding:12px; }
.report-gas-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.report-gas-grid .all-gases-option { grid-column:1 / -1; }
.gas-dot.all {
  background:conic-gradient(from 30deg, #20bf66 0 33%, #ff7417 33% 66%, #3c86e8 66% 100%);
  box-shadow:0 0 0 4px rgba(32,191,102,.1);
}

/* Multi-gas comparison features belong exclusively to the All gases metric. */
[data-all-gases-only][hidden] { display:none !important; }
body:not([data-active-metric="all"]) .charts-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
.report-gas-option { min-height:84px; }
.report-gas-option:first-child { grid-column:1 / -1; }
.report-gas-option .gas-dot { width:13px; height:13px; flex:0 0 auto; }

/* Location preparation state */
.location-analysis-overlay {
  position:fixed;
  inset:0;
  z-index:5100;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(13,20,29,.58);
  backdrop-filter:blur(7px) saturate(75%);
}
.location-analysis-overlay.open { display:flex; }
body.location-analysis-open { overflow:hidden; }
.location-analysis-card {
  width:min(470px,calc(100vw - 30px));
  padding:28px 30px 24px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:24px;
  color:#fff;
  background:rgba(96,103,103,.68);
  box-shadow:0 28px 80px rgba(5,12,20,.32);
  text-align:center;
  backdrop-filter:blur(22px) saturate(120%);
}
.location-progress-ring {
  --analysis-progress:0deg;
  position:relative;
  width:94px;
  height:94px;
  display:grid;
  place-items:center;
  margin:0 auto 24px;
  border-radius:50%;
  background:conic-gradient(#22e4b2 var(--analysis-progress),rgba(191,207,211,.48) 0);
}
.location-progress-ring::after { content:''; position:absolute; inset:7px; border-radius:50%; background:rgba(104,111,111,.92); }
.location-progress-ring span { position:relative; z-index:1; color:#28e3b1; font:800 11px 'Inter',sans-serif; }
.location-analysis-card h2 { margin:0; font:800 22px/1.2 'Inter',sans-serif; letter-spacing:-.35px; }
.location-analysis-card p { max-width:355px; margin:10px auto 22px; color:rgba(255,255,255,.82); font-size:10px; line-height:1.5; }
.location-analysis-line { height:2px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.42); }
.location-analysis-line span { display:block; width:0; height:100%; border-radius:inherit; background:#22e4b2; transition:width .12s linear; }
.location-analysis-card > small { display:block; margin-top:20px; color:rgba(255,255,255,.72); font-size:7px; font-weight:700; text-transform:uppercase; letter-spacing:.35px; }
.sidebar-filter-pane { display:none; }
.sidebar-filter-heading { padding-bottom:12px; border-bottom:1px solid #e5ebf1; }
.sidebar-filter-heading span { display:block; color:#182133; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; }
.sidebar-filter-heading small { display:block; margin-top:4px; color:#8292a8; font-size:9px; line-height:1.35; }
.sidebar-filter-pane #sidebarFilterMount { display:flex; flex-direction:column; }
.sidebar-filter-pane .workspace-filter-controls { display:flex; flex-direction:column; gap:12px; }
.sidebar-filter-pane .map-layer-filter { margin:0; padding:0 0 12px; border-top:0; border-bottom:1px solid #e5ebf1; }
.sidebar-filter-pane .map-layer-filter .ctrl-label { margin-bottom:7px; font-size:8px; }
.sidebar-filter-pane .map-layer-filter .ctrl-select,
.sidebar-filter-pane .map-filter-stack .ctrl-select { height:34px; font-size:10px; }
.sidebar-filter-pane .map-filter-stack { margin:0; padding:0; border:0; gap:10px; }
.sidebar-filter-pane .map-filter-title { font-size:10px; }
.sidebar-filter-pane .map-filter-stack .ctrl-label { font-size:8.5px; }
.sidebar-filter-pane .map-filter-stack :is(.apply-filter-btn, .reset-filter-btn) { height:34px; font-size:9px; }
.sidebar-filter-pane .map-setup-button { height:32px; border:1px solid #dce4ec; border-radius:10px; background:#f7f9fb; font-size:9px; }
.sidebar-overview-button { width:100%; min-height:36px; margin-top:auto; border:1px solid #dce4ec; border-radius:11px; color:#475569; background:#fff; font:700 9px 'Inter',sans-serif; cursor:pointer; }
.sidebar-overview-button:hover { color:#20bf66; border-color:#9ddfba; background:#effbf4; }

body.workspace-focused .topbar-kpis,
body.workspace-focused .bottom-row { display:none !important; }
body.workspace-focused.workspace-charts-visible .bottom-row { display:block !important; }
body.workspace-focused .sidebar {
  width:220px;
  min-width:220px;
  padding:0 14px 16px;
  overflow-y:auto;
}
body.workspace-focused .sidebar-brand {
  position:static;
  width:auto;
  height:72px;
  margin:0;
  padding:14px 2px 10px;
}
body.workspace-focused .sidebar-brand .brand-logo { width:150px; height:52px; object-position:left center; }
body.workspace-focused :is(.nav-list, .sidebar-controls) { display:none; }
body.workspace-focused .sidebar-filter-pane { min-height:calc(100vh - 88px); display:flex; flex-direction:column; gap:14px; padding-bottom:56px; }
body.workspace-focused .sidebar-help {
  display:flex;
  left:14px;
  bottom:14px;
  width:36px;
  height:36px;
  z-index:4;
  border:1px solid #dce4ec;
  background:rgba(255,255,255,.88);
  box-shadow:0 7px 18px rgba(30,53,76,.10);
}
body.workspace-focused .map-layer-card { width:155px; }
body.workspace-focused .topbar { height:104px; min-height:104px; }
body.workspace-focused .content-row { padding-top:20px; }
body.workspace-focused .right-panel { height:calc(var(--map-h) + 74px); }
body.workspace-focused.workspace-charts-visible .right-panel { height:calc(var(--rhs-pane-h) + 74px); }
body.workspace-focused :is(#saPanel, #landfillsPanel, #gasPanel) { top:124px; height:var(--map-h); }

/* With charts hidden, the workspace becomes a full-height map experience. */
body.workspace-focused:not(.workspace-charts-visible) .content-row {
  height:calc(100dvh - 12px);
  min-height:calc(100dvh - 12px);
  align-items:stretch;
}
body.workspace-focused:not(.workspace-charts-visible) .map-stack {
  height:100%;
  min-height:0;
}
body.workspace-focused:not(.workspace-charts-visible) .map-wrap {
  flex:1 1 auto;
  height:auto;
  min-height:0;
}
body.workspace-focused:not(.workspace-charts-visible) .right-panel {
  height:auto;
  min-height:0;
  max-height:none;
  align-self:stretch;
}
body.workspace-focused:not(.workspace-charts-visible) :is(#saPanel, #landfillsPanel, #gasPanel) {
  height:calc(100dvh - 40px);
}

html:is([data-theme="dark"], [data-theme="modern"]) .access-wizard-card {
  color:var(--t1);
  background:color-mix(in srgb, var(--surface-2) 78%, transparent);
  border-color:var(--border-h);
}
html:is([data-theme="dark"], [data-theme="modern"]) .access-wizard-step h2 { color:var(--t1); }
html:is([data-theme="dark"], [data-theme="modern"]) :is(.access-option, .access-lga-field select, .access-back, .access-chart-choice) { color:var(--t1); background:color-mix(in srgb, var(--surface) 78%, transparent); border-color:var(--border); }
html:is([data-theme="dark"], [data-theme="modern"]) .access-option.selected { background:var(--accent-d); border-color:var(--accent); }
html:is([data-theme="dark"], [data-theme="modern"]) .access-availability-note { color:var(--t1); background:var(--accent-d); border-color:color-mix(in srgb,var(--accent) 42%,var(--border)); }
html:is([data-theme="dark"], [data-theme="modern"]) .access-availability-note.unavailable { color:var(--t2); background:var(--surface-2); border-color:var(--border); }
html:is([data-theme="dark"], [data-theme="modern"]) .next-action-bar { background:color-mix(in srgb,var(--surface) 88%,transparent); border-color:var(--border); box-shadow:var(--sh-md); }
html:is([data-theme="dark"], [data-theme="modern"]) :is(.next-action-prompt, .next-action-utilities) { border-color:var(--border); }
html:is([data-theme="dark"], [data-theme="modern"]) .next-action-prompt strong { color:var(--t1); }
html:is([data-theme="dark"], [data-theme="modern"]) .next-action-prompt small { color:var(--t2); }
html:is([data-theme="dark"], [data-theme="modern"]) .next-action-button { color:var(--t2); border-color:var(--border); background:var(--surface-2); }
html:is([data-theme="dark"], [data-theme="modern"]) .next-action-button:hover,
html:is([data-theme="dark"], [data-theme="modern"]) .next-action-button.active { color:var(--accent); border-color:var(--accent); background:var(--accent-d); }
html:is([data-theme="dark"], [data-theme="modern"]) .next-action-button.next-action-primary { color:#07110b; border-color:var(--accent); background:var(--accent); }
html:is([data-theme="dark"], [data-theme="modern"]) .analysis-action-menu { color:var(--t1); border-color:var(--border); background:color-mix(in srgb,var(--surface) 96%,transparent); }
html:is([data-theme="dark"], [data-theme="modern"]) .analysis-action-menu button { color:var(--t1); }
html:is([data-theme="dark"], [data-theme="modern"]) .analysis-action-menu button:hover { background:var(--accent-d); }
html:is([data-theme="dark"], [data-theme="modern"]) .analysis-action-menu small,
html:is([data-theme="dark"], [data-theme="modern"]) .access-chart-choice small { color:var(--t2); }
html:is([data-theme="dark"], [data-theme="modern"]) .sidebar-filter-heading { border-color:var(--border); }
html:is([data-theme="dark"], [data-theme="modern"]) .sidebar-filter-heading span { color:var(--t1); }
html:is([data-theme="dark"], [data-theme="modern"]) .sidebar-filter-heading small { color:var(--t2); }
html:is([data-theme="dark"], [data-theme="modern"]) :is(.sidebar-filter-pane .map-layer-filter, .sidebar-filter-pane .map-setup-button, .sidebar-overview-button) { border-color:var(--border); }
html:is([data-theme="dark"], [data-theme="modern"]) :is(.sidebar-filter-pane .map-setup-button, .sidebar-overview-button) { color:var(--t2); background:var(--surface-2); }

@media (max-width:700px) {
  .access-wizard-overlay { padding:10px; align-items:flex-end; }
  .access-wizard-card { width:100%; max-height:calc(100dvh - 20px); padding:24px 18px 18px; border-radius:24px; }
  .access-wizard-step h2 { font-size:23px; }
  .access-option-grid.two-up,
  .access-option-grid.three-up { grid-template-columns:1fr; }
  .access-option { min-height:76px; }
  .access-option.compact { min-height:74px; flex-direction:row; align-items:center; }
  .access-wizard-actions { position:sticky; bottom:-18px; padding:12px 0 4px; background:inherit; }
}

@media (max-width:1050px) {
  body.workspace-focused .sidebar { width:240px; min-width:240px; padding:0 14px 16px; }
  body.workspace-focused .sidebar-filter-pane { display:none; }
  .next-action-bar { grid-template-columns:auto 1fr auto; }
  .next-action-prompt { display:none; }
  .next-action-buttons { justify-content:flex-start; overflow-x:auto; padding-bottom:2px; }
}

@media (max-width:700px) {
  .next-action-bar { grid-template-columns:1fr; gap:7px; padding:8px; border-radius:13px; }
  .next-action-buttons { width:100%; justify-content:flex-start; scrollbar-width:none; }
  .next-action-buttons::-webkit-scrollbar { display:none; }
  .next-action-button { flex:0 0 auto; }
  .project-new-button { justify-self:start; }
  .next-action-utilities { flex-direction:row; justify-content:flex-end; padding:3px 2px 0; border-left:0; border-top:1px solid #e4eaf0; }
  .analysis-action-menu { position:fixed; left:10px; right:10px; bottom:calc(var(--mob-nav-h) + 10px); top:auto; width:auto; transform:none; }
  body.workspace-focused .right-panel,
  body.workspace-focused.workspace-charts-visible .right-panel { height:auto; }
  body.workspace-focused.workspace-charts-visible .bottom-row { display:flex !important; }
  .report-gas-grid { grid-template-columns:1fr; }
  .report-gas-option:first-child { grid-column:auto; }
  .location-analysis-card { padding:25px 20px 22px; border-radius:22px; }
}

.map-legend {
  bottom:18px;
  left:218px;
  max-width:205px;
  padding:10px 16px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:22px;
  background:rgba(255,255,255,.78);
  box-shadow:none;
}
.map-legend .legend-header strong { color:#182133; font:800 12px 'Inter',sans-serif; letter-spacing:0; }
.map-legend.collapsed { max-height:44px; padding:12px 16px; overflow:hidden; }
.map-legend.collapsed .legend-header { margin:0; }
.map-tip { display:none !important; }
.map-wrap .leaflet-top.leaflet-left { top:252px; left:auto; right:14px; }
.map-wrap .leaflet-left .leaflet-control { margin-left:0; margin-right:0; }
.leaflet-control-zoom { border:0 !important; box-shadow:0 7px 18px rgba(30,53,76,.12) !important; }
.leaflet-control-zoom a { width:32px !important; height:32px !important; line-height:32px !important; }

.filter-bar {
  min-height:70px;
  display:grid;
  grid-template-columns:145px repeat(4,minmax(100px,1fr)) auto auto;
  gap:8px;
  align-items:end;
  padding:12px 14px;
  border-radius:18px;
  background:#fff;
  border:1px solid #edf1f5;
}
.filter-title { align-self:center; display:flex; align-items:center; gap:7px; color:#182133; font-size:11px; font-weight:800; }
.filter-title svg { color:#182133; }
.filter-bar label { display:flex; flex-direction:column; gap:5px; }
.filter-bar .ctrl-label { margin:0; color:#8292a8; font-size:8px; text-transform:uppercase; }
.ctrl-select { height:28px; padding:0 24px 0 10px; border-color:#edf1f5; background-color:#f5f7fa; color:#3d4c61; font-size:8.5px; font-weight:600; }
.ctrl-select:focus { border-color:#9ddfba; box-shadow:0 0 0 3px rgba(32,191,102,.08); }
.apply-filter-btn,
.reset-filter-btn { height:28px; border-radius:15px; font:700 8.5px 'Inter',sans-serif; cursor:pointer; }
.apply-filter-btn { min-width:88px; padding:0 16px; border:0; color:#fff; background:#20bf66; }
.reset-filter-btn { padding:0 8px; border:0; color:#8392a6; background:transparent; }
.format-desc[hidden] { display:none !important; }

.right-panel {
  width:var(--rhs-pane-w);
  height:var(--rhs-pane-h);
  align-self:stretch;
  margin-bottom:0;
  padding:18px 20px;
  border:1px solid #dce4ec;
  border-radius:22px;
  background:#f8fafc;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.rp-header {
  flex:0 0 24px;
  height:24px;
  padding:0;
  border-bottom:0;
  color:#182133;
  font:800 13px 'Inter',sans-serif;
  letter-spacing:0;
}
.rp-header::before { width:3px; height:15px; background:#20bf66; box-shadow:none; }
.rp-header::after { content:'● Active'; margin-left:auto; color:#213b2c; font-size:9px; font-weight:700; }
.rp-header::first-letter { color:inherit; }
.inspector-switch-pane {
  position:relative;
  z-index:40;
  flex:0 0 auto;
  min-height:40px;
  display:flex;
  align-items:center;
  gap:3px;
  padding:4px;
  border:1px solid #dce4ec;
  border-radius:13px;
  background:#edf2f6;
}
.inspector-switch-title {
  min-width:0;
  flex:1 1 auto;
  height:32px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 8px;
  border-radius:9px;
  color:#182133;
  background:#fff;
  box-shadow:0 1px 4px rgba(30,53,76,.08);
  font:800 10px 'Inter',sans-serif;
  white-space:nowrap;
}
.inspector-switch-title > span {
  width:3px;
  height:14px;
  flex:0 0 auto;
  border-radius:3px;
  background:#20bf66;
}
.inspector-switch-button {
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0 8px;
  border:0;
  border-radius:9px;
  color:#61738a;
  background:transparent;
  font:750 8.5px 'Inter',sans-serif;
  white-space:nowrap;
  cursor:pointer;
  transition:color .18s ease, background .18s ease, box-shadow .18s ease;
}
.inspector-switch-button:hover,
.inspector-switch-button.active {
  color:#138f4a;
  background:#fff;
  box-shadow:0 1px 4px rgba(30,53,76,.08);
}
.inspector-analysis-wrap { position:relative; }
.inspector-analysis-wrap .analysis-action-menu {
  left:auto;
  right:0;
  width:240px;
  transform:none;
}
@media (max-width:700px) {
  .inspector-analysis-wrap .analysis-action-menu {
    position:fixed;
    left:10px;
    right:10px;
    bottom:calc(var(--mob-nav-h) + 10px);
    top:auto;
    width:auto;
  }
}
.rp-section {
  margin-top:0;
  padding:13px;
  border:1px solid #dce4ec;
  border-radius:14px;
  background:#fff;
}
.right-panel > .selected-lga-card {
  min-height:88px;
  flex:1 1 88px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.inspector-stats-row { flex:1 1 72px; min-height:72px; gap:10px; }
.inspector-stats-row .rp-stat { height:100%; display:flex; flex-direction:column; justify-content:center; }
.right-panel > .isi-section {
  min-height:110px;
  flex:1.15 1 110px;
  display:flex;
  flex-direction:column;
}
.isi-section .isi-content { flex:1; }
.right-panel > .risk-indicator-card {
  min-height:50px;
  flex:.65 1 50px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.right-panel > .emission-summary-card {
  min-height:162px;
  flex:1.6 1 162px;
  display:flex;
  flex-direction:column;
}
.emission-summary-card .emission-row { flex:1; }
.emission-summary-card .emission-gas { flex:1; }
.right-panel > .proximity-card {
  min-height:68px;
  flex:.8 1 68px;
  display:flex;
  flex-direction:column;
}
.proximity-card .prox-row {
  flex:1;
  justify-content:center;
}
.rp-section-title { margin:0 0 6px; color:#71839a; font-size:10px; letter-spacing:.2px; }
.rp-lga-name { margin:0; min-height:20px; color:#182133; font:700 15px/1.2 'Inter',sans-serif; }
.rp-helper { margin:3px 0 0; color:#7d8da2; font-size:9px; line-height:1.2; }
.rp-row { gap:10px; margin:0; }
.rp-stat { min-height:72px; padding:11px 10px; border:1px solid #dce4ec; border-radius:12px; background:#fff; }
.rp-stat-label { color:#7d8da2; font-size:9.5px; font-weight:700; }
.rp-stat-value { color:#182133; font:700 16px 'Inter',sans-serif; }
.rp-stat-value.accent { color:#182133; }
.isi-content { display:flex; align-items:center; gap:18px; }
.isi-gauge {
  width:82px;
  height:56px;
  flex:0 0 82px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:1px;
  border-radius:70px 70px 10px 10px;
  border:8px solid #ff7417;
  border-bottom:0;
  color:#182133;
  font:800 20px 'Inter',sans-serif;
}
.isi-gauge small { margin:0 0 2px 2px; color:#8a99ac; font-size:8px; }
.isi-copy { min-width:0; }
.isi-copy p { margin-top:7px; color:#70829b; font-size:10px; line-height:1.25; }
.stat-badge { padding:0; color:#182133; background:transparent !important; font-size:13px; text-transform:none; letter-spacing:0; }
.stat-badge::before { content:''; width:8px; height:8px; margin-right:7px; border-radius:50%; background:#ff7417; }
.risk-heading { display:flex; justify-content:space-between; gap:10px; color:#71839a; font-size:9px; font-weight:800; text-transform:uppercase; }
.risk-heading strong { color:#ff7417; font-size:9px; }
.risk-track { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin-top:9px; }
.risk-track i { display:block; height:6px; border-radius:4px; background:#e5ebf1; }
.emission-row { gap:0; }
.emission-gas { min-height:38px; padding:8px 0; border:0; border-bottom:1px solid #e6ebf0; border-radius:0; background:#fff; }
.emission-gas:last-child { border-bottom:0; }
.eg-symbol { width:auto; min-width:34px; padding:5px 6px; border-radius:6px; font:800 10px 'Inter',sans-serif; text-align:center; }
.emission-gas.ch4 .eg-symbol { color:#20bf66; background:#dff8e9; }
.emission-gas.no2 .eg-symbol { color:#ff7417; background:#fff0dd; }
.emission-gas.co .eg-symbol { color:#3c86e8; background:#e5f0ff; }
.eg-name { color:#334155; font-size:11px; font-weight:600; }
.eg-value { color:#70829b; font:700 11px 'Inter',sans-serif; }
.prox-item { padding:0; border:0; background:#fff; }
.prox-icon { width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:#fff0dd; }
.prox-icon svg { stroke:#ff7417 !important; }

/* lower analytics row */
.bottom-row {
  height:320px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  overflow:visible;
}
.charts-row {
  height:320px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.chart-card {
  padding:18px 22px 16px;
  border:1px solid #dce4ec !important;
  border-radius:22px;
  background:#fff;
  overflow:hidden;
}
.chart-hdr {
  min-height:28px;
  padding:0;
  border:0;
  color:#182133;
  font:700 15px 'Inter',sans-serif;
  text-transform:none;
  letter-spacing:0;
}
.dl-btn { border:0; background:transparent; color:#91a0b5; font-size:17px; }
.dl-btn:hover { background:#eff8f2; color:#20bf66; }
.chart-plot { margin-top:10px; }
.chart-card:nth-child(3) { height:auto; margin-top:0; }
.chart-card:nth-child(3) .chart-plot { min-height:0; margin-top:10px; }
.charts-row { align-items:stretch; }
.chart-card {
  min-width:0;
  display:flex;
  flex-direction:column;
  box-shadow:0 8px 24px rgba(30,53,76,.055);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.chart-card:hover { transform:translateY(-2px); border-color:#cbd6e1 !important; box-shadow:0 14px 34px rgba(30,53,76,.09); }
.chart-hdr { flex:0 0 auto; align-items:center; gap:12px; }
.chart-hdr span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chart-plot { position:relative; flex:1 1 auto; min-height:205px; overflow:hidden; }
.chart-plot canvas,
#gasPanel canvas { width:100% !important; max-width:100% !important; height:100% !important; }
#gasPanel .gas-content > div:has(canvas) {
  border-radius:16px !important;
  padding:12px !important;
  background:var(--surface) !important;
  box-shadow:0 6px 18px rgba(30,53,76,.045);
}
#gasPanel .gas-summary-grid { gap:10px; }
#gasPanel .gas-sum-card { min-width:0; padding:12px 10px 10px; border-radius:14px; }
#gasPanel .gas-sum-val { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Reflow charts according to the map column's real width, not the viewport. */
@container map-charts (max-width:950px) {
  .bottom-row,
  .charts-row { height:auto; }
  .charts-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .chart-card { min-height:280px; }
  .chart-card:nth-child(3) {
    grid-column:1 / -1;
    min-height:260px;
  }
}

@container map-charts (max-width:620px) {
  .charts-row { grid-template-columns:minmax(0,1fr); }
  .chart-card:nth-child(3) { grid-column:auto; }
}

.sa-panel { top:0; right:0; height:100%; border-left:1px solid #dce4ec; background:#fff; }

@media (max-width:1250px) {
  :root { --sidebar-w:78px; --rhs-pane-w:360px; }
  .sidebar-brand { left:calc(var(--sidebar-w) + 28px); }
  .nav-item { width:58px; height:58px; border-radius:16px; }
  .content-row { padding-left:24px; padding-right:24px; }
  .topbar { padding-left:24px; padding-right:24px; }
  .topbar-kpis { left:24px; right:24px; gap:16px; }
  .export-report-btn { right:24px; }
  .content-row { grid-template-columns:minmax(0,1fr) var(--rhs-pane-w); gap:18px; }
  .charts-row { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
  .filter-bar { grid-template-columns:145px repeat(4,minmax(92px,1fr)) auto; }
  .reset-filter-btn { display:none; }
}

@media (max-width:1050px) {
  html, body { overflow:auto; }
  .app-shell { display:block; }
  .sidebar { position:fixed; transform:translateX(-100%); width:240px; z-index:1200; overflow-y:auto; }
  .sidebar.open { transform:translateX(0); }
  .sidebar-brand { position:static; width:auto; margin:20px; }
  .nav-list { margin-top:20px; padding:0 14px; gap:5px; }
  .nav-item { width:100%; height:48px; justify-content:flex-start; padding:0 14px; }
  .nav-label { display:block; }
  .sidebar-help { position:static; margin:8px 20px; }
  .sidebar-help { margin:8px auto 20px; }
  body.workspace-focused .sidebar-help {
    position:absolute;
    left:14px;
    bottom:14px;
    margin:0;
  }
  .main-area { height:auto; min-height:100vh; overflow:visible; }
  .topbar { min-height:295px; height:295px; padding:26px 18px; }
  .topbar-center { margin-top:0; flex-basis:100%; max-width:100%; }
  .export-report-btn { top:84px; right:18px; height:38px; }
  .topbar-kpis { left:18px; right:18px; height:150px; grid-template-columns:repeat(2,1fr); gap:10px; }
  .strip-card { height:70px; padding:12px 14px; border-radius:16px; }
  .strip-val { font-size:19px; }
  .strip-lbl { font-size:10px; }
  .content-row { display:block; padding:16px 14px 0; }
  .map-wrap { flex-basis:520px; height:520px; min-height:520px; border-radius:20px; }
  .map-layer-card { width:180px; }
  .live-monitor-card { width:180px; padding:14px; }
  .filter-bar { display:grid; grid-template-columns:repeat(2,1fr); }
  .filter-title { grid-column:1/-1; }
  .apply-filter-btn { grid-column:1/-1; }
  .right-panel { width:100%; height:auto; margin:18px 0 0; border-radius:20px; }
  .right-panel > .rp-section { min-height:0; flex:none; }
  .map-stack .bottom-row { height:auto; padding:18px 14px 90px; }
  .map-stack .charts-row { height:auto; grid-template-columns:1fr; }
  .chart-card { min-height:300px; border-radius:20px; }
  .map-stack .chart-card:nth-child(3) { height:auto; margin-top:0; grid-column:auto; }
  .chart-card:nth-child(3) .chart-plot { min-height:220px; }
  .mobile-menu-btn { display:flex; position:absolute; top:84px; left:18px; }
  .mobile-bottom-nav { display:flex; }
}

@media (max-width:560px) {
  .topbar { min-height:330px; height:330px; }
  .topbar-kpis { height:190px; }
  .strip-card { height:90px; }
  .map-wrap { flex-basis:460px; height:460px; min-height:460px; }
  .map-layer-card { left:10px; top:10px; width:180px; transform:scale(.88); transform-origin:top left; }
  .live-monitor-card { display:none; }
  .map-basemap-control { top:10px; right:10px; width:140px; }
  .map-legend { left:170px; }
  .filter-bar { grid-template-columns:1fr 1fr; padding:14px; }
  .right-panel { padding:16px; }
}

/* Secondary dashboard views use the same supporting-text scale. */
.sa-desc,
.sa-select,
.sa-table,
.sa-table td { font-size:16.5px; }
.sa-table .rank-num,
.sa-table .vs-avg-pos,
.sa-table .vs-avg-neg,
.corr-card,
.trend-up,
.trend-down,
.trend-flat { font-size:15px; }
.sa-table .lga-name-cell,
.sa-table .val-cell,
.corr-card-lga { font-size:16.5px; }
.sa-badge,
.corr-card-note { font-size:13.5px; }
.sa-anomaly-count { font-size:18px; }
.sa-anomaly-count .count-num { font-size:33px; }

/* Keep the Gas Emissions pane on the compact scale used by its chart. */
#gasPanel .sa-desc,
#gasPanel .sa-select,
#gasPanel .sa-table,
#gasPanel .sa-table td { font-size:11px; }
#gasPanel .sa-table .rank-num,
#gasPanel .sa-table .vs-avg-pos,
#gasPanel .sa-table .vs-avg-neg { font-size:10px; }
#gasPanel .sa-table .lga-name-cell,
#gasPanel .sa-table .val-cell,
#gasPanel .corr-card-lga { font-size:11px; }
#gasPanel .sa-badge { font-size:9px; }
#gasPanel .corr-card { font-size:10px; }
#gasPanel .corr-card-note { font-size:9px; }
#gasPanel .gas-sum-sym { font-size:13px; }
#gasPanel .gas-sum-val { font-size:12px; }
#gasPanel .gas-sum-unit { font-size:9px; }
#gasPanel .gas-sum-chg { font-size:10px; }

.lf-meta { font-size:15px; }
.lf-coords,
.lf-gas-sym,
.lf-status { font-size:13.5px; }
.lf-gas-val { font-size:16.5px; }
.lf-gas-unit,
.lf-buf small { font-size:12px; }
.lf-buf span { font-size:21px; }
.lf-buf-label { font-size:15px; }
.trend-year-labels { font-size:11px; }
.trend-slider-lbl { font-size:9px; }
.gas-sum-sym { font-size:19.5px; }
.gas-sum-val { font-size:18px; }
.gas-sum-unit { font-size:13.5px; }
.gas-sum-chg { font-size:15px; }
.draw-loading,
.draw-gas-sym,
.draw-gas-val { font-size:16.5px; }
.draw-gas-unit { font-size:13.5px; }

/* Preserve the same Bento geometry in Dark and Modern modes. */
html:is([data-theme="dark"], [data-theme="modern"]) :is(.sidebar, .search-box, .theme-switcher, .strip-card, .filter-bar, .rp-section, .rp-stat, .emission-gas, .prox-item, .chart-card, .sa-panel) {
  background:var(--surface);
  border-color:var(--border) !important;
}
html:is([data-theme="dark"], [data-theme="modern"]) :is(.main-area, .topbar, .bottom-row) { background:var(--bg); }
html:is([data-theme="dark"], [data-theme="modern"]) .sidebar { border-right-color:var(--border); }
html:is([data-theme="dark"], [data-theme="modern"]) .right-panel {
  background:var(--surface-2);
  border-color:var(--border);
}
html:is([data-theme="dark"], [data-theme="modern"]) :is(.map-layer-card, .live-monitor-card, .map-legend) {
  background:color-mix(in srgb, var(--surface) 90%, transparent);
  border-color:var(--border);
}
html:is([data-theme="dark"], [data-theme="modern"]) :is(.search-input, .strip-val, .filter-title, .rp-header, .rp-lga-name, .rp-stat-value, .isi-gauge, .stat-badge, .chart-hdr, .live-monitor-card > span, .map-legend .legend-header strong, .eg-name, .map-layer-card .toggle-label) { color:var(--t1); }
html:is([data-theme="dark"], [data-theme="modern"]) :is(.search-input::placeholder, .strip-lbl, .filter-bar .ctrl-label, .reset-filter-btn, .rp-section-title, .rp-helper, .rp-stat-label, .isi-copy p, .risk-heading, .eg-value, .live-monitor-card small, .layer-card-heading) { color:var(--t2); }
html:is([data-theme="dark"], [data-theme="modern"]) :is(.ctrl-select, .map-layer-filter .ctrl-select) {
  color:var(--t1);
  background-color:var(--surface-2);
  border-color:var(--border);
}
html:is([data-theme="dark"], [data-theme="modern"]) :is(.export-report-btn, .apply-filter-btn, .live-monitor-card small i, .rp-header::before) { background:var(--accent); }
html:is([data-theme="dark"], [data-theme="modern"]) .map-basemap-control {
  color:var(--t1);
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  border-color:var(--border);
}
html:is([data-theme="dark"], [data-theme="modern"]) :is(.map-filter-stack, .map-layer-filter) { border-color:var(--border); }
html:is([data-theme="dark"], [data-theme="modern"]) :is(.map-filter-title, .map-filter-stack .ctrl-label, .map-basemap-control .ctrl-label) { color:var(--t2); }
html:is([data-theme="dark"], [data-theme="modern"]) :is(.map-filter-stack .ctrl-select, .map-basemap-control .ctrl-select, .map-filter-stack .reset-filter-btn) {
  color:var(--t1);
  background-color:var(--surface-2);
  border-color:var(--border);
}
html:is([data-theme="dark"], [data-theme="modern"]) :is(.nav-item:hover, .nav-item.active, .sidebar-help:hover) { color:var(--accent); background:var(--accent-d); }
html:is([data-theme="dark"], [data-theme="modern"]) .brand-title { color:var(--accent); }

/* Floating analysis drawers — match the light Bento reference cards. */
#saPanel,
#landfillsPanel,
#gasPanel {
  position:absolute;
  top:205px;
  right:32px;
  bottom:auto;
  width:var(--rhs-pane-w);
  height:var(--rhs-pane-h);
  border:1px solid #dce4ec;
  border-radius:22px;
  background:#f8fafc;
  box-shadow:0 16px 42px rgba(51, 65, 85, .14);
  transform:translateX(calc(100% + 48px));
  z-index:1150;
}

#saPanel.open,
#landfillsPanel.open,
#gasPanel.open { transform:translateX(0); }

#saPanel .sa-header,
#landfillsPanel .sa-header,
#gasPanel .sa-header {
  min-height:56px;
  padding:14px 18px 10px;
  border-bottom:0;
}

#saPanel .sa-title,
#landfillsPanel .sa-title,
#gasPanel .sa-title {
  gap:10px;
  color:#182133;
  font-family:'Inter', sans-serif;
  font-size:14px;
  font-weight:800;
  letter-spacing:0;
  text-transform:none;
}

#saPanel .sa-title svg,
#landfillsPanel .sa-title svg,
#gasPanel .sa-title svg {
  box-sizing:content-box;
  width:15px;
  height:15px;
  padding:7px;
  border-radius:8px;
  stroke:#20bf66;
  background:#dff8e9;
}

#landfillsPanel .sa-title svg {
  stroke:#4b8cdf;
  background:#e5f0ff;
}

#saPanel .sa-close,
#landfillsPanel .sa-close,
#gasPanel .sa-close {
  width:28px;
  height:28px;
  border:0;
  border-radius:50%;
  background:#f0f3f6;
}

#saPanel .sa-tabs {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  padding:0 14px;
  border-bottom:1px solid #edf1f5;
  background:transparent;
}

#gasPanel .sa-tabs {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  padding:0 14px;
  border-bottom:1px solid #edf1f5;
  background:transparent;
}

#saPanel .sa-tab,
#gasPanel .sa-tab {
  min-height:43px;
  padding:8px 3px 9px;
  border-bottom:2px solid transparent;
  color:#71839a;
  font-size:10px;
  font-weight:600;
  letter-spacing:0;
  line-height:1.15;
  text-transform:none;
}

#saPanel .sa-tab.active,
#gasPanel .sa-tab.active {
  color:#20bf66;
  border-bottom-color:#20bf66;
}

#saPanel .sa-content,
#landfillsPanel .sa-content,
#gasPanel .gas-content {
  padding:14px 18px 18px !important;
  gap:12px !important;
}

#saPanel .sa-controls-row,
#gasPanel .sa-controls-row { gap:12px; }

#saPanel .sa-select,
#gasPanel .sa-select {
  min-width:0;
  height:36px;
  padding:0 28px 0 12px;
  border:0;
  border-radius:10px;
  color:#334155;
  background-color:#fff;
  font-size:10px;
  font-weight:600;
}

#saPanel .sa-table-wrap {
  border:0;
  border-radius:0;
  overflow-y:auto;
  overflow-x:auto;
}

#saPanel .sa-table {
  border-collapse:separate;
  border-spacing:0 4px;
  table-layout:auto;
  font-size:9px;
}

#saPanel .sa-table th {
  padding:2px 6px 6px;
  border:0;
  color:#71839a;
  background:#f8fafc;
  font-size:8px;
  letter-spacing:.2px;
}

#rankingsTable { table-layout:fixed; }
#rankingsTable th:nth-child(1) { width:9%; }
#rankingsTable th:nth-child(2) { width:37%; }
#rankingsTable th:nth-child(3) { width:20%; }
#rankingsTable th:nth-child(4) { width:19%; }
#rankingsTable th:nth-child(5) { width:15%; }

#trendTable {
  width:max-content;
  min-width:100%;
  table-layout:auto;
}

#trendTable th:first-child,
#trendTable td:first-child {
  position:sticky;
  left:0;
  z-index:2;
  width:128px;
  min-width:128px;
  max-width:128px;
}

#trendTable th:not(:first-child),
#trendTable td:not(:first-child) {
  min-width:68px;
  text-align:center;
}

#trendTable thead th:first-child { z-index:4; }
#trendTable tbody td:first-child { background:#fff; }
#trendTable tbody tr:nth-child(even) td:first-child { background:#eef1f4; }
#trendTable tbody tr:hover td:first-child { background:#e8f8ee; }

#saPanel .sa-table td {
  height:37px;
  padding:5px 6px;
  border:0;
  color:#334155;
  background:#fff;
  font-size:9px;
  white-space:nowrap;
}

#saPanel .sa-table tbody tr:nth-child(even) td { background:#eef1f4; }
#saPanel .sa-table tbody tr:hover td { background:#e8f8ee; color:#182133; }
#saPanel .sa-table tbody td:first-child { border-radius:9px 0 0 9px; }
#saPanel .sa-table tbody td:last-child { border-radius:0 9px 9px 0; }

#saPanel .sa-table .rank-num {
  display:inline-flex;
  width:19px;
  height:19px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#71839a;
  background:#e7edf3;
  font-size:8px;
}

#saPanel .sa-table .rank-num.top3 {
  color:#20bf66;
  background:#dff8e9;
}

#saPanel .sa-table .lga-name-cell,
#saPanel .sa-table .val-cell {
  color:#263247;
  font-size:9px;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
}

#saPanel .sa-table .val-cell { font-family:'Space Grotesk', sans-serif; }
#saPanel .sa-table .vs-avg-pos { color:#20bf66; font-size:8.5px; }
#saPanel .sa-table .vs-avg-neg { color:#f97316; font-size:8.5px; }
#saPanel .sa-table .vs-avg-pos::before { content:'\2191  '; }
#saPanel .sa-table .vs-avg-neg::before { content:'\2193  '; }

#saPanel .sa-badge,
#landfillsPanel .sa-badge {
  padding:3px 7px;
  border-radius:6px;
  background:#ff7417;
  font-size:7px;
  letter-spacing:0;
}

#saPanel .sa-badge.critical,
#saPanel .sa-badge.high,
#saPanel .sa-badge.elevated,
#landfillsPanel .sa-badge.critical,
#landfillsPanel .sa-badge.high,
#landfillsPanel .sa-badge.elevated { background:#ff7417; }

#saPanel .sa-desc,
#landfillsPanel .sa-desc,
#gasPanel .sa-desc {
  padding:11px 12px;
  border:1px solid #91e5b2;
  border-radius:12px;
  color:#334155;
  background:#f1fcf5;
  font-size:10px;
  line-height:1.45;
}

#landfillsPanel .sa-content { background:#f8fafc; }
#landfillsList { gap:12px !important; }

#landfillsPanel .lf-card {
  flex:0 0 auto;
  border:1px solid #dfe6ed;
  border-radius:14px;
  background:#fff;
  box-shadow:0 3px 10px rgba(51, 65, 85, .04);
}

#landfillsPanel .lf-card-header {
  padding:12px 13px 10px;
  border-bottom:0;
}

#landfillsPanel .lf-name {
  color:#182133;
  font-family:'Inter', sans-serif;
  font-size:12px;
  font-weight:800;
}

#landfillsPanel .lf-meta {
  margin-top:7px;
  color:#71839a;
  font-size:9px;
  font-weight:600;
}

#landfillsPanel .lf-coords {
  margin-top:2px;
  color:#9aa8ba;
  font-size:8px;
  font-weight:600;
  letter-spacing:.2px;
}

#landfillsPanel .lf-status {
  margin-top:9px;
  padding:4px 9px;
  border-radius:7px;
  font-size:7px;
  letter-spacing:0;
}

#landfillsPanel .lf-gas-row {
  margin:0 13px 12px;
  border:0;
  gap:0;
}

#landfillsPanel .lf-gas {
  padding:5px 7px 3px;
  border-right:0;
  border-left-width:2px;
  text-align:left;
}

#landfillsPanel .lf-gas.ch4 { border-left-color:#20bf66; }
#landfillsPanel .lf-gas.no2 { border-left-color:#ff7417; }
#landfillsPanel .lf-gas.co { border-left-color:#3c86e8; }
#landfillsPanel .lf-gas.isi { border-left-color:#cbd5e1; }
#landfillsPanel .lf-gas-sym { margin-bottom:2px; color:#71839a; font-size:8px; }
#landfillsPanel .lf-gas-val { color:#182133; font-size:10px; }
#landfillsPanel .lf-gas-unit { margin-top:0; color:#9aa8ba; font-size:7px; }

html:is([data-theme="dark"], [data-theme="modern"]) :is(#saPanel, #landfillsPanel, #gasPanel) {
  background:var(--surface-2);
  border-color:var(--border);
}

html:is([data-theme="dark"], [data-theme="modern"]) :is(#saPanel, #landfillsPanel, #gasPanel) :is(.sa-title, .lf-name, .lf-gas-val) { color:var(--t1); }
html:is([data-theme="dark"], [data-theme="modern"]) :is(#saPanel, #landfillsPanel, #gasPanel) :is(.sa-content, .gas-content, .sa-table th) { background:var(--surface-2); }
html:is([data-theme="dark"], [data-theme="modern"]) :is(#saPanel, #landfillsPanel, #gasPanel) :is(.sa-select, .sa-table td, .lf-card) { background:var(--surface); color:var(--t1); }
html:is([data-theme="dark"], [data-theme="modern"]) #saPanel .sa-table tbody tr:nth-child(even) td { background:var(--surface-3); }

@media (max-width:1250px) and (min-width:1051px) {
  #saPanel,
  #landfillsPanel,
  #gasPanel { right:24px; width:var(--rhs-pane-w); }
}

@media (max-width:1050px) {
  #saPanel,
  #landfillsPanel,
  #gasPanel {
    position:fixed;
    top:16px;
    right:16px;
    bottom:82px;
    left:16px;
    width:auto;
    height:auto;
    border-radius:20px;
  }
}

/* ── Fixed right-hand workspace tabs ───────────────────────────────
   Inspector, comparison, charts and analysis share one pane. Nothing
   is positioned over the map; switching a tab replaces the pane body. */
.right-panel {
  padding:0;
  gap:0;
  overflow:hidden;
  background:#f8fafc;
}

.right-pane-tabs {
  flex:0 0 44px;
  min-width:0;
  display:flex;
  align-items:stretch;
  padding:0 10px;
  border-bottom:1px solid #dce4ec;
  background:rgba(255,255,255,.92);
  overflow-x:auto;
  scrollbar-width:none;
}
.right-pane-tabs::-webkit-scrollbar { display:none; }

.right-pane-tab {
  position:relative;
  flex:1 0 auto;
  min-width:58px;
  padding:0 7px;
  border:0;
  background:transparent;
  color:#71839a;
  font:700 9px/1 'Inter',sans-serif;
  white-space:nowrap;
  cursor:pointer;
  transition:color .18s ease, background .18s ease;
}
.right-pane-tab[data-right-pane-tab="inspector"] { min-width:92px; }
.right-pane-tab[data-right-pane-tab="landfills"] { min-width:72px; }

.right-pane-tab:hover { color:#263247; background:#f6faf8; }
.right-pane-tab.active { color:#169e52; }
.right-pane-tab.active::after {
  content:'';
  position:absolute;
  left:7px;
  right:7px;
  bottom:-1px;
  height:2px;
  border-radius:2px 2px 0 0;
  background:#20bf66;
}

.right-pane-views {
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}

.right-pane-view {
  width:100%;
  height:100%;
  min-height:0;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#cad5df transparent;
}
.right-pane-view[hidden] { display:none !important; }
.right-pane-view.active { display:flex; flex-direction:column; }

.inspector-view {
  gap:7px;
  padding:9px 10px 10px;
}
.inspector-view > .selected-lga-card {
  min-height:72px;
  flex:.9 1 72px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.inspector-view > .inspector-stats-row { min-height:60px; flex:.8 1 60px; }
.inspector-view > .isi-section {
  min-height:92px;
  flex:1.1 1 92px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.inspector-view > .risk-indicator-card {
  min-height:44px;
  flex:.65 1 44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.inspector-view > .emission-summary-card {
  min-height:132px;
  flex:1.25 1 132px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.inspector-view > .proximity-card {
  min-height:56px;
  flex:.75 1 56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.inspector-view > .rp-section { padding:10px 11px; }
.inspector-view .rp-stat { min-height:60px; padding:8px 9px; }
.inspector-view .isi-content { gap:11px; }
.inspector-view .isi-gauge {
  width:70px;
  height:46px;
  flex-basis:70px;
  border-width:7px;
  border-bottom-width:0;
  font-size:17px;
}
.inspector-view .isi-copy p { margin-top:4px; font-size:9px; }
.inspector-view .emission-gas { min-height:32px; padding:5px 0; }
.inspector-view .prox-icon { width:26px; height:26px; }

.compare-view,
.charts-view,
.analyse-view,
.landfills-view { padding:12px; gap:10px; }

.right-pane-empty {
  margin:auto 4px;
  padding:24px 18px;
  border:1px dashed #cdd8e4;
  border-radius:14px;
  background:#fff;
  color:#71839a;
  text-align:center;
}
.right-pane-empty[hidden] { display:none !important; }
.right-pane-empty strong { display:block; margin-bottom:6px; color:#263247; font-size:12px; }
.right-pane-empty span { display:block; font-size:10px; line-height:1.5; }

.right-pane-panel-host {
  width:100%;
  height:100%;
  min-height:0;
}
.compare-view .right-pane-panel-host,
.charts-view .right-pane-panel-host,
.analyse-view .right-pane-panel-host,
.landfills-view .right-pane-panel-host { flex:1 1 auto; display:flex; min-height:0; }

/* Embedded panels retain their functionality without behaving as overlays. */
.right-panel :is(#saPanel, #gasPanel, #landfillsPanel) {
  position:static !important;
  inset:auto !important;
  width:100% !important;
  height:100% !important;
  min-height:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  transform:none !important;
  z-index:auto;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none !important;
  overflow:visible;
}
.right-panel :is(#saPanel, #gasPanel, #landfillsPanel) > .sa-header { display:none; }
.right-panel :is(#saPanel, #gasPanel) > .sa-tabs {
  position:sticky;
  top:0;
  z-index:2;
  border:1px solid #dce4ec;
  border-radius:11px 11px 0 0;
  overflow:hidden;
}
.right-panel :is(#saPanel, #gasPanel, #landfillsPanel) > :is(.sa-content, .gas-content) {
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:12px 0;
}

/* Let every right-pane mode use the same vertical rhythm as the Inspector.
   Visual content expands into free space; data-heavy content scrolls locally. */
.compare-view #gasPanel > .gas-content.active,
.analyse-view #saPanel > .sa-content.active,
.landfills-view #landfillsPanel > .sa-content.active {
  display:flex;
  flex:1 1 auto;
  min-height:0;
}
.compare-view #gasPanel > .gas-content.active > div:has(canvas) {
  height:auto !important;
  min-height:220px;
  flex:1 1 260px;
}
.compare-view #gasPanel .gas-summary-grid {
  min-height:112px;
  align-items:stretch;
}
.compare-view #gasPanel .gas-sum-card { justify-content:center; }
.landfills-view #landfillsList {
  flex:1 1 auto;
  min-height:0;
}
.landfills-view #landfillsList > .lf-card {
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

/* Dashboard charts are stacked inside the Charts tab. */
.charts-view .bottom-row,
body.workspace-focused .charts-view .bottom-row,
body.workspace-focused.workspace-charts-visible .charts-view .bottom-row {
  display:flex !important;
  flex:1 1 auto;
  flex-direction:column;
  width:100%;
  height:100%;
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
  overflow:visible;
}
.charts-view .charts-row {
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  height:100%;
  min-height:0;
  gap:10px;
}
.charts-view .chart-card {
  flex:1 1 0;
  width:100%;
  min-height:230px;
  border:1px solid #dce4ec;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
}
.charts-view .chart-plot { min-height:190px; }

/* Opening Charts no longer changes the map or inspector dimensions. */
body.workspace-focused.workspace-charts-visible .right-panel {
  height:auto;
  min-height:0;
  max-height:none;
  align-self:stretch;
}
body.workspace-focused .content-row {
  height:calc(100dvh - 12px);
  min-height:calc(100dvh - 12px);
  align-items:stretch;
}
body.workspace-focused .map-stack { height:100%; min-height:0; }
body.workspace-focused .map-wrap { flex:1 1 auto; height:auto; min-height:0; }

html:is([data-theme="dark"], [data-theme="modern"]) .right-pane-tabs {
  border-color:var(--border);
  background:var(--surface-2);
}
html:is([data-theme="dark"], [data-theme="modern"]) .right-pane-tab { color:var(--t2); }
html:is([data-theme="dark"], [data-theme="modern"]) .right-pane-tab:hover { color:var(--t1); background:var(--surface-3); }
html:is([data-theme="dark"], [data-theme="modern"]) .right-pane-tab.active { color:var(--accent); }
html:is([data-theme="dark"], [data-theme="modern"]) :is(.right-pane-empty, .charts-view .chart-card) {
  color:var(--t1);
  background:var(--surface);
  border-color:var(--border);
}
html:is([data-theme="dark"], [data-theme="modern"]) .right-pane-empty strong { color:var(--t1); }

@media (max-width:700px) {
  .right-pane-tabs { position:sticky; top:0; z-index:5; padding:0 6px; overflow-x:auto; }
  .right-pane-tab { min-width:72px; }
  .inspector-view,
  .compare-view,
  .charts-view,
  .analyse-view,
  .landfills-view { padding:10px; }
}

/* ═══════════════════════════════════════════════════════════════
   DARK + MODERN THEMES
   Role-based surfaces and contrast follow the same hierarchy as
   contemporary product UIs: page, panel, interactive, border, text.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  color-scheme:dark;
  --bg:#0b0d10;
  --sidebar:#0a0c0f;
  --surface:#111418;
  --surface-2:#15191e;
  --surface-3:#1b2128;
  --border:#2a3139;
  --border-h:#45d887;
  --accent:#2bc871;
  --accent-d:rgba(43,200,113,.12);
  --accent-g:0 0 0 3px rgba(43,200,113,.12);
  --green:#2bc871;
  --red:#ff6b70;
  --amber:#ff9b42;
  --t1:#f4f6f8;
  --t2:#a3acb9;
  --t3:#697586;
  --sh-md:0 8px 24px rgba(0,0,0,.24);
  --sh-lg:0 22px 56px rgba(0,0,0,.42);
  --map-legend-bg:rgba(17,20,24,.9);
  --select-arrow:'%23a3acb9';
}

[data-theme="modern"] {
  color-scheme:dark;
  --bg:#0d1020;
  --sidebar:#101326;
  --surface:#15182b;
  --surface-2:#191d34;
  --surface-3:#222742;
  --border:rgba(190,196,255,.16);
  --border-h:#a78bfa;
  --accent:#9b7cf6;
  --accent-d:rgba(155,124,246,.15);
  --accent-g:0 0 0 3px rgba(155,124,246,.14),0 12px 36px rgba(73,48,154,.22);
  --green:#39d98a;
  --red:#ff6f91;
  --amber:#ffad5c;
  --t1:#f6f4ff;
  --t2:#b9b5d0;
  --t3:#7a7695;
  --sh-md:0 10px 30px rgba(4,6,18,.3);
  --sh-lg:0 24px 64px rgba(3,5,16,.5);
  --map-legend-bg:rgba(21,24,43,.88);
  --select-arrow:'%23b9b5d0';
}

html:is([data-theme="dark"], [data-theme="modern"]) body {
  background:var(--bg);
  color:var(--t1);
}

html:is([data-theme="dark"], [data-theme="modern"]) :is(.sidebar, .topbar, .bottom-row) {
  background:var(--bg);
}

html:is([data-theme="dark"], [data-theme="modern"]) .sidebar {
  background:var(--sidebar);
  border-right-color:var(--border);
}

html:is([data-theme="dark"], [data-theme="modern"]) :is(.sidebar-brand, .brand-icon) { background:transparent; }
html:is([data-theme="dark"], [data-theme="modern"]) .brand-title { color:var(--accent); }
html:is([data-theme="dark"], [data-theme="modern"]) .brand-sub { color:var(--t2); }

html:is([data-theme="dark"], [data-theme="modern"]) .nav-item {
  color:var(--t2);
  background:transparent;
}
html:is([data-theme="dark"], [data-theme="modern"]) .nav-item:hover {
  color:var(--t1);
  background:var(--surface-2);
}
html:is([data-theme="dark"], [data-theme="modern"]) .nav-item.active {
  color:var(--accent);
  background:var(--accent-d);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent);
}
html:is([data-theme="dark"], [data-theme="modern"]) .sidebar-help { color:var(--t2); }
html:is([data-theme="dark"], [data-theme="modern"]) .sidebar-help:hover { color:var(--accent); background:var(--accent-d); }

html:is([data-theme="dark"], [data-theme="modern"]) :is(.search-box, .theme-switcher) {
  background:var(--surface);
  border-color:var(--border);
  box-shadow:0 1px 0 rgba(255,255,255,.025),var(--sh-md);
}
html:is([data-theme="dark"], [data-theme="modern"]) .search-box:focus-within {
  border-color:var(--border-h);
  box-shadow:var(--accent-g);
}
html:is([data-theme="dark"], [data-theme="modern"]) .search-input { color:var(--t1); }
html:is([data-theme="dark"], [data-theme="modern"]) .search-input::placeholder { color:var(--t3); }
html:is([data-theme="dark"], [data-theme="modern"]) .search-icon svg { stroke:var(--t2) !important; }
html:is([data-theme="dark"], [data-theme="modern"]) .theme-btn { color:var(--t2); }
html:is([data-theme="dark"], [data-theme="modern"]) .theme-btn:hover { color:var(--t1); background:var(--surface-3); }
html:is([data-theme="dark"], [data-theme="modern"]) .theme-btn.active {
  color:var(--accent);
  background:var(--accent-d);
  border-color:color-mix(in srgb,var(--accent) 40%,transparent);
  box-shadow:none;
}
html:is([data-theme="dark"], [data-theme="modern"]) .export-report-btn {
  background:var(--accent);
  color:#07110b;
  box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 22%,transparent);
}
html:is([data-theme="dark"], [data-theme="modern"]) .export-report-btn:hover {
  background:color-mix(in srgb,var(--accent) 88%,white);
}

html:is([data-theme="dark"], [data-theme="modern"]) .strip-card {
  background:var(--surface);
  border-color:var(--border) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.025),var(--sh-md);
}
html:is([data-theme="dark"], [data-theme="modern"]) .strip-card:hover {
  background:var(--surface-2);
  border-color:color-mix(in srgb,var(--border) 70%,var(--t3)) !important;
  box-shadow:var(--sh-md);
}
html:is([data-theme="dark"], [data-theme="modern"]) .strip-val { color:var(--t1); }
html:is([data-theme="dark"], [data-theme="modern"]) .strip-lbl { color:var(--t2); }

html:is([data-theme="dark"], [data-theme="modern"]) .content-row { background:transparent; }
html:is([data-theme="dark"], [data-theme="modern"]) .map-wrap {
  background:#0c1117;
  border-color:var(--border);
  box-shadow:var(--sh-md);
}
html:is([data-theme="dark"], [data-theme="modern"]) :is(.map-layer-card, .live-monitor-card, .map-legend) {
  background:var(--map-legend-bg);
  border-color:var(--border);
  box-shadow:var(--sh-md);
  backdrop-filter:blur(18px) saturate(125%);
}
html:is([data-theme="dark"], [data-theme="modern"]) :is(.layer-card-heading, .live-monitor-card small) { color:var(--t2); }
html:is([data-theme="dark"], [data-theme="modern"]) :is(.live-monitor-card > span, .live-monitor-card strong, .map-legend .legend-header strong, .map-layer-card .toggle-label) { color:var(--t1); }
html:is([data-theme="dark"], [data-theme="modern"]) .map-layer-filter { border-top-color:var(--border); }
html:is([data-theme="dark"], [data-theme="modern"]) .map-layer-filter .ctrl-label { color:var(--t3); }
html:is([data-theme="dark"], [data-theme="modern"]) :is(.map-layer-card .toggle-track, .map-layer-card .fixed-active-dot) { background:var(--surface-3); }
html:is([data-theme="dark"], [data-theme="modern"]) .map-layer-card .toggle-track::after { background:var(--t2); }
html:is([data-theme="dark"], [data-theme="modern"]) :is(.map-layer-card .layer-toggle input:checked ~ .toggle-track, .map-layer-card .fixed-active-dot) { background:var(--accent); }
html:is([data-theme="dark"], [data-theme="modern"]) :is(.map-layer-card .layer-toggle input:checked ~ .toggle-track::after, .map-layer-card .fixed-active-dot::after) { background:#fff; }
html:is([data-theme="dark"], [data-theme="modern"]) .leaflet-bar a {
  background:var(--surface) !important;
  border-color:var(--border) !important;
  color:var(--t1) !important;
}
html:is([data-theme="dark"], [data-theme="modern"]) .leaflet-bar a:hover { background:var(--surface-3) !important; }
html:is([data-theme="dark"], [data-theme="modern"]) .leaflet-control-attribution {
  background:color-mix(in srgb,var(--surface) 90%,transparent) !important;
  color:var(--t2) !important;
}

html:is([data-theme="dark"], [data-theme="modern"]) .filter-bar {
  background:var(--surface);
  border-color:var(--border);
  box-shadow:0 1px 0 rgba(255,255,255,.02);
}
html:is([data-theme="dark"], [data-theme="modern"]) :is(.filter-title, .filter-title svg) { color:var(--t1); }
html:is([data-theme="dark"], [data-theme="modern"]) .filter-bar .ctrl-label { color:var(--t3); }
html:is([data-theme="dark"], [data-theme="modern"]) :is(.ctrl-select, .map-layer-filter .ctrl-select, .sa-select) {
  color:var(--t1);
  background-color:var(--surface-2);
  border-color:var(--border);
}
[data-theme="dark"] .ctrl-select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23a3acb9' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
}
[data-theme="modern"] .ctrl-select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23b9b5d0' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
}
html:is([data-theme="dark"], [data-theme="modern"]) :is(.ctrl-select, .sa-select):hover { border-color:color-mix(in srgb,var(--border) 60%,var(--t2)); }
html:is([data-theme="dark"], [data-theme="modern"]) :is(.ctrl-select, .sa-select):focus {
  border-color:var(--border-h);
  box-shadow:var(--accent-g);
}
html:is([data-theme="dark"], [data-theme="modern"]) .apply-filter-btn { background:var(--accent); color:#07110b; }
html:is([data-theme="dark"], [data-theme="modern"]) .reset-filter-btn { color:var(--t2); }
html:is([data-theme="dark"], [data-theme="modern"]) .reset-filter-btn:hover { color:var(--t1); background:var(--surface-3); }

html:is([data-theme="dark"], [data-theme="modern"]) .right-panel {
  background:var(--surface-2);
  border-color:var(--border);
  box-shadow:var(--sh-md);
}
html:is([data-theme="dark"], [data-theme="modern"]) .rp-header { color:var(--t1); }
html:is([data-theme="dark"], [data-theme="modern"]) .rp-header::after { color:var(--green); }
html:is([data-theme="dark"], [data-theme="modern"]) .inspector-switch-pane { border-color:var(--border); background:var(--surface-2); }
html:is([data-theme="dark"], [data-theme="modern"]) .inspector-switch-title { color:var(--t1); background:var(--surface); box-shadow:none; }
html:is([data-theme="dark"], [data-theme="modern"]) .inspector-switch-button { color:var(--t2); }
html:is([data-theme="dark"], [data-theme="modern"]) .inspector-switch-button:hover,
html:is([data-theme="dark"], [data-theme="modern"]) .inspector-switch-button.active { color:var(--accent); background:var(--accent-d); box-shadow:none; }
html:is([data-theme="dark"], [data-theme="modern"]) :is(.rp-section, .rp-stat) {
  background:var(--surface);
  border-color:var(--border);
}
html:is([data-theme="dark"], [data-theme="modern"]) :is(.rp-section-title, .rp-stat-label, .rp-helper, .isi-copy p, .risk-heading) { color:var(--t2); }
html:is([data-theme="dark"], [data-theme="modern"]) :is(.rp-lga-name, .rp-stat-value, .rp-stat-value.accent, .isi-gauge, .stat-badge) { color:var(--t1); }
html:is([data-theme="dark"], [data-theme="modern"]) .isi-gauge { background:transparent; }
html:is([data-theme="dark"], [data-theme="modern"]) .risk-track i { background:var(--surface-3); }
html:is([data-theme="dark"], [data-theme="modern"]) .emission-gas {
  background:transparent;
  border-bottom-color:var(--border);
}
html:is([data-theme="dark"], [data-theme="modern"]) .emission-gas.ch4 .eg-symbol { color:#39d98a; background:rgba(57,217,138,.12); }
html:is([data-theme="dark"], [data-theme="modern"]) .emission-gas.no2 .eg-symbol { color:#ff9b42; background:rgba(255,155,66,.12); }
html:is([data-theme="dark"], [data-theme="modern"]) .emission-gas.co .eg-symbol { color:#68a7ff; background:rgba(104,167,255,.12); }
html:is([data-theme="dark"], [data-theme="modern"]) :is(.eg-name, .eg-value) { color:var(--t2); }
html:is([data-theme="dark"], [data-theme="modern"]) .prox-item { background:transparent; }
html:is([data-theme="dark"], [data-theme="modern"]) .prox-icon { background:rgba(255,155,66,.12); }

html:is([data-theme="dark"], [data-theme="modern"]) .chart-card {
  background:var(--surface);
  border-color:var(--border) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.025),var(--sh-md);
}
html:is([data-theme="dark"], [data-theme="modern"]) .chart-hdr { color:var(--t1); }
html:is([data-theme="dark"], [data-theme="modern"]) .dl-btn { color:var(--t3); }
html:is([data-theme="dark"], [data-theme="modern"]) .dl-btn:hover { color:var(--accent); background:var(--accent-d); }

html:is([data-theme="dark"], [data-theme="modern"]) :is(#saPanel, #landfillsPanel, #gasPanel) {
  background:var(--surface-2);
  border-color:var(--border);
  box-shadow:var(--sh-lg);
}
html:is([data-theme="dark"], [data-theme="modern"]) :is(#saPanel, #landfillsPanel, #gasPanel) .sa-header {
  background:var(--surface-2);
  border-bottom-color:var(--border);
}
html:is([data-theme="dark"], [data-theme="modern"]) :is(#saPanel, #landfillsPanel, #gasPanel) :is(.sa-content, .sa-table th) { background:var(--surface-2); }
html:is([data-theme="dark"], [data-theme="modern"]) :is(#saPanel, #landfillsPanel, #gasPanel) :is(.sa-title, .sa-table td, .lf-name, .lf-gas-val, .gas-sum-val) { color:var(--t1); }
html:is([data-theme="dark"], [data-theme="modern"]) :is(#saPanel, #landfillsPanel, #gasPanel) :is(.sa-desc, .sa-table th, .lf-meta, .lf-coords, .lf-gas-sym, .lf-gas-unit, .gas-sum-unit) { color:var(--t2); }
html:is([data-theme="dark"], [data-theme="modern"]) :is(#saPanel, #landfillsPanel, #gasPanel) :is(.lf-card, .corr-card, .gas-summary-card) {
  background:var(--surface);
  border-color:var(--border);
  box-shadow:none;
}
html:is([data-theme="dark"], [data-theme="modern"]) :is(#saPanel, #landfillsPanel, #gasPanel) .sa-title svg {
  stroke:var(--accent);
  background:var(--accent-d);
}
html:is([data-theme="dark"], [data-theme="modern"]) #landfillsPanel .sa-title svg {
  stroke:#68a7ff;
  background:rgba(104,167,255,.12);
}
html:is([data-theme="dark"], [data-theme="modern"]) #saPanel .sa-tabs { border-bottom-color:var(--border); }
html:is([data-theme="dark"], [data-theme="modern"]) #saPanel .sa-tab { color:var(--t2); }
html:is([data-theme="dark"], [data-theme="modern"]) #saPanel .sa-tab:hover { color:var(--t1); background:var(--surface-3); }
html:is([data-theme="dark"], [data-theme="modern"]) #saPanel .sa-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
html:is([data-theme="dark"], [data-theme="modern"]) #saPanel .sa-table td { background:var(--surface); border-bottom-color:var(--border); }
html:is([data-theme="dark"], [data-theme="modern"]) #saPanel .sa-table tbody tr:nth-child(even) td { background:var(--surface-3); }
html:is([data-theme="dark"], [data-theme="modern"]) #saPanel .sa-table tbody tr:hover td { background:var(--accent-d); color:var(--t1); }
html:is([data-theme="dark"], [data-theme="modern"]) #saPanel .sa-table :is(.lga-name-cell, .val-cell) { color:var(--t1); }
html:is([data-theme="dark"], [data-theme="modern"]) #saPanel .sa-table .rank-num { color:var(--t2); background:var(--surface-3); }
html:is([data-theme="dark"], [data-theme="modern"]) #saPanel .sa-table .rank-num.top3 { color:var(--accent); background:var(--accent-d); }
html:is([data-theme="dark"], [data-theme="modern"]) :is(#saPanel, #landfillsPanel, #gasPanel) .sa-desc {
  color:var(--t2);
  background:var(--accent-d);
  border-color:color-mix(in srgb,var(--accent) 34%,transparent);
}
html:is([data-theme="dark"], [data-theme="modern"]) #landfillsPanel .sa-content { background:transparent; }
html:is([data-theme="dark"], [data-theme="modern"]) #landfillsPanel .lf-gas-row { border-color:var(--border); }
html:is([data-theme="dark"], [data-theme="modern"]) .sa-close { color:var(--t2); background:var(--surface-3); border-color:var(--border); }
html:is([data-theme="dark"], [data-theme="modern"]) .sa-close:hover { color:var(--t1); border-color:var(--border-h); }

html[data-theme="modern"] .main-area {
  background:
    radial-gradient(circle at 82% 6%,rgba(91,70,180,.18),transparent 30%),
    radial-gradient(circle at 18% 90%,rgba(32,191,102,.08),transparent 34%),
    var(--bg);
}
html[data-theme="modern"] :is(.topbar, .bottom-row) { background:transparent; }
html[data-theme="modern"] :is(.search-box, .theme-switcher, .strip-card, .filter-bar, .right-panel, .rp-section, .rp-stat, .chart-card, #saPanel, #landfillsPanel, #gasPanel) {
  background:rgba(21,24,43,.78);
  backdrop-filter:blur(18px) saturate(130%);
}
html[data-theme="modern"] .right-panel { background:rgba(17,20,38,.82); }
html[data-theme="modern"] .strip-card:hover { background:rgba(34,39,66,.9); }
html[data-theme="modern"] .export-report-btn,
html[data-theme="modern"] .apply-filter-btn { color:#fff; }

html:is([data-theme="dark"], [data-theme="modern"]) :is(button, select, input):focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce) {
  html:is([data-theme="dark"], [data-theme="modern"]) * { scroll-behavior:auto !important; }
}

/* Workspace controls live in the left pane: project, filters, then actions. */
body.workspace-focused .sidebar-filter-pane {
  min-height:0;
  gap:12px;
}
.sidebar-new-project {
  width:100%;
  min-height:40px;
  flex:0 0 auto;
  border-radius:11px;
}
.sidebar-filter-pane .next-action-bar {
  min-height:0;
  width:100%;
  flex:0 0 auto;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  margin-top:2px;
  padding:13px 0 0;
  border:0;
  border-top:1px solid #e5ebf1;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}
body.workspace-focused .sidebar-filter-pane .next-action-bar { display:flex; }
.sidebar-filter-pane .next-action-prompt {
  min-width:0;
  width:100%;
  padding:10px 11px;
  border:1px solid #dce4ec;
  border-radius:11px;
  background:#f8fafc;
}
.sidebar-filter-pane .next-action-prompt strong { font-size:11px; }
.sidebar-filter-pane .next-action-prompt small {
  max-width:100%;
  font-size:7.5px;
}
.sidebar-filter-pane .next-action-buttons {
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:7px;
  overflow:visible;
  padding:0;
}
.sidebar-filter-pane .next-action-menu-wrap { width:100%; }
.sidebar-filter-pane .next-action-button {
  width:100%;
  min-height:34px;
  justify-content:flex-start;
  padding:0 11px;
  border-radius:9px;
  font-size:8.5px;
}
.sidebar-filter-pane .next-action-button .action-caret { margin-left:auto; }
.sidebar-filter-pane .analysis-action-menu {
  position:static;
  width:100%;
  margin-top:6px;
  transform:none;
  box-shadow:0 8px 22px rgba(20,35,54,.1);
}
.sidebar-filter-pane .analysis-action-menu button {
  grid-template-columns:64px minmax(0,1fr);
}
.sidebar-filter-pane .next-action-utilities {
  width:100%;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 2px 0;
  border:0;
  border-top:1px solid #e5ebf1;
}

/* Persistent basemap list, aligned with the other map toolkits. */
.map-basemap-control {
  position:absolute;
  z-index:700;
  top:auto;
  right:258px;
  bottom:36px;
  display:none;
  width:180px;
  overflow:hidden;
  padding:0;
  border:1px solid rgba(255,255,255,.58);
  border-radius:13px;
  background:rgba(255,255,255,.68);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 10px 28px rgba(30,53,76,.13);
}
.map-basemap-control.open { display:block; }
.basemap-list-heading {
  width:100%;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px;
  border:0;
  border-bottom:1px solid rgba(220,228,236,.72);
  color:#71839a;
  background:transparent;
  font:800 7.5px/1 'Inter',sans-serif;
  letter-spacing:.75px;
  text-transform:uppercase;
  cursor:pointer;
}
.basemap-list-heading svg { transition:transform .18s ease; }
.basemap-list-heading:hover { color:#182133; background:rgba(255,255,255,.28); }
.basemap-list { display:flex; flex-direction:column; }
.basemap-list-option {
  width:100%;
  min-height:31px;
  display:grid;
  grid-template-columns:16px minmax(0,1fr) 14px;
  align-items:center;
  gap:7px;
  padding:5px 9px;
  border:0;
  border-bottom:1px solid rgba(220,228,236,.62);
  color:#52657c;
  background:transparent;
  font:600 9px/1.2 'Inter',sans-serif;
  text-align:left;
  cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
.basemap-list-option:last-child { border-bottom:0; }
.basemap-list-option svg {
  width:14px;
  height:14px;
  fill:none;
  stroke:#8292a8;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.basemap-list-option i { color:#20bf66; font-style:normal; opacity:0; text-align:right; }
.basemap-list-option:hover { color:#182133; background:rgba(255,255,255,.42); }
.basemap-list-option.active { color:#182133; background:rgba(32,191,102,.11); }
.basemap-list-option.active svg { stroke:#20bf66; }
.basemap-list-option.active i { opacity:1; }

html:is([data-theme="dark"], [data-theme="modern"]) .sidebar-filter-pane .next-action-bar {
  background:transparent;
  border-color:var(--border);
  box-shadow:none;
}
html:is([data-theme="dark"], [data-theme="modern"]) .sidebar-filter-pane .next-action-prompt {
  background:var(--surface-2);
  border-color:var(--border);
}
html:is([data-theme="dark"], [data-theme="modern"]) .sidebar-filter-pane .next-action-utilities {
  border-color:var(--border);
}

@media (max-width:1050px) {
  body.workspace-focused .sidebar-filter-pane {
    display:flex;
    min-height:calc(100dvh - 88px);
  }
}

@media (max-width:700px) {
  .sidebar-filter-pane .analysis-action-menu {
    position:static;
    inset:auto;
    width:100%;
    transform:none;
  }
}

/* The wizard establishes the initial report; these controls keep the live
   workspace adjustable without forcing the user back through setup. */
.map-layer-card > .workspace-filter-controls { display:none; }
.workspace-filter-form { width:100%; }
.workspace-filter-actions {
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  gap:7px;
  margin-top:2px;
}
.workspace-filter-actions :is(.apply-filter-btn, .reset-filter-btn) { min-width:0; }
.workspace-filter-actions .reset-filter-btn { color:#64748b; }

/* Keep the legend at the far-left edge and the base-layer card in the
   lower-right map corner, clear of the navigation and raster tool groups. */
.map-legend {
  left:14px;
  right:auto;
}

/* Location search belongs to the map and remains available in workspace mode. */
.map-search-control {
  position:absolute;
  z-index:700;
  top:14px;
  left:50%;
  width:clamp(220px,42%,380px);
  transform:translateX(-50%);
}
.map-search-control .search-box {
  width:100%;
  height:38px;
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 24px rgba(30,53,76,.14);
  backdrop-filter:blur(14px) saturate(130%);
}
.map-search-control .search-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.map-search-analysis-point {
  width:16px;
  height:16px;
  border:3px solid rgba(255,255,255,.96);
  border-radius:50%;
  background:#00bfe8;
  box-shadow:0 0 0 5px rgba(0,191,232,.2),0 5px 14px rgba(8,28,44,.34);
}
.sa-data-context {
  margin:0 0 8px;
  padding:8px 10px;
  border:1px solid #dce4ec;
  border-radius:9px;
  color:#64748b;
  background:#f8fafc;
  font:700 8.5px/1.35 'Inter',sans-serif;
}
.sa-empty-row {
  padding:22px 10px !important;
  color:#8292a8 !important;
  text-align:center !important;
}
html:is([data-theme="dark"], [data-theme="modern"]) .map-search-control .search-box,
html:is([data-theme="dark"], [data-theme="modern"]) .sa-data-context {
  color:var(--t2);
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  border-color:var(--border);
}
.map-layer-card,
body.workspace-focused .map-layer-card {
  top:auto;
  bottom:36px;
  left:auto;
  right:58px;
  width:190px;
  border-color:rgba(255,255,255,.58);
  background:rgba(255,255,255,.68);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 10px 28px rgba(30,53,76,.13);
}

/* Keep navigation and raster-selection tools in one dock beside Layers. */
.map-wrap .leaflet-top.leaflet-left {
  top:auto;
  right:14px;
  bottom:36px;
  left:auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
}
.map-wrap .leaflet-top.leaflet-left .leaflet-control { margin:0; }
.map-wrap :is(.leaflet-control-zoom, .draw-toolbar) {
  overflow:hidden;
  border:1px solid rgba(255,255,255,.58) !important;
  background:rgba(255,255,255,.68) !important;
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 8px 22px rgba(30,53,76,.13) !important;
}
.map-wrap .leaflet-control-zoom a {
  background:transparent !important;
  border-color:rgba(220,228,236,.62) !important;
}

html:is([data-theme="dark"], [data-theme="modern"]) :is(.map-layer-card, .map-basemap-control, .map-wrap .leaflet-control-zoom, .map-wrap .draw-toolbar) {
  border-color:color-mix(in srgb,var(--border) 78%,transparent) !important;
  background:color-mix(in srgb,var(--surface) 68%,transparent) !important;
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  backdrop-filter:blur(18px) saturate(135%);
}
html:is([data-theme="dark"], [data-theme="modern"]) :is(.basemap-list-heading, .basemap-list-option) {
  color:var(--t2);
  border-color:color-mix(in srgb,var(--border) 72%,transparent);
}
html:is([data-theme="dark"], [data-theme="modern"]) .basemap-list-option:hover { color:var(--t1); background:rgba(255,255,255,.06); }
html:is([data-theme="dark"], [data-theme="modern"]) .basemap-list-option.active { color:var(--t1); background:var(--accent-d); }

@media (max-width:560px) {
  .map-legend { left:10px; right:auto; }
  .map-search-control {
    top:10px;
    width:calc(100% - 120px);
  }
  .map-layer-card,
  body.workspace-focused .map-layer-card {
    top:auto;
    bottom:62px;
    left:auto;
    right:48px;
    width:150px;
    transform:none;
  }
  .map-basemap-control {
    right:206px;
    bottom:62px;
    width:136px;
  }
  .map-wrap .leaflet-top.leaflet-left { right:8px; bottom:62px; }
  .basemap-list-option { min-height:28px; padding:4px 7px; font-size:8px; }
}

/* Guided actions from the LGA inspector. The same progressive-disclosure
   language as the setup wizard keeps the main workspace visually quiet. */
.inspector-next-row {
  position:sticky;
  bottom:-1px;
  z-index:3;
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
  margin-top:0;
  padding:7px 1px 1px;
  background:linear-gradient(180deg,transparent 0,var(--surface-2) 34%);
}
.inspector-back-button {
  min-width:92px;
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 15px;
  border:1px solid var(--border);
  border-radius:11px;
  color:var(--t2);
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  box-shadow:none;
  font:700 10px/1 'Inter',sans-serif;
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.inspector-back-button:hover:not(:disabled) {
  color:var(--t1);
  border-color:var(--border-h);
  background:var(--surface);
  transform:translateY(-1px);
}
.inspector-back-button:focus-visible { outline:3px solid rgba(32,191,102,.18); outline-offset:2px; }
.inspector-back-button:disabled { opacity:.42; cursor:not-allowed; transform:none; }
.inspector-next-button {
  min-width:108px;
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:0 17px;
  border:0;
  border-radius:11px;
  color:#fff;
  background:#20bf66;
  box-shadow:0 8px 18px rgba(32,191,102,.22);
  font:800 10px/1 'Inter',sans-serif;
  text-transform:uppercase;
  letter-spacing:.35px;
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}
.inspector-next-button:hover { transform:translateY(-1px); background:#18a958; box-shadow:0 10px 22px rgba(32,191,102,.28); }
.inspector-next-button:focus-visible { outline:3px solid rgba(32,191,102,.24); outline-offset:2px; }

.inspector-next-overlay {
  position:fixed;
  inset:0;
  z-index:5200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(11,18,28,.34);
  -webkit-backdrop-filter:blur(5px) saturate(90%);
  backdrop-filter:blur(5px) saturate(90%);
}
.inspector-next-overlay.open { display:flex; }
body.inspector-next-open { overflow:hidden; }
.inspector-next-card {
  position:relative;
  width:min(560px,calc(100vw - 32px));
  max-height:calc(100dvh - 32px);
  overflow:auto;
  padding:28px;
  border:1px solid rgba(255,255,255,.74);
  border-radius:24px;
  color:#172033;
  background:rgba(247,249,251,.82);
  -webkit-backdrop-filter:blur(24px) saturate(135%);
  backdrop-filter:blur(24px) saturate(135%);
  box-shadow:0 28px 80px rgba(8,15,28,.32);
}
.inspector-next-close {
  position:absolute;
  top:18px;
  right:18px;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid rgba(203,213,225,.85);
  border-radius:10px;
  color:#64748b;
  background:rgba(255,255,255,.58);
  cursor:pointer;
}
.inspector-next-close:hover { color:#172033; background:#fff; }
.inspector-next-progress { width:calc(100% - 52px); height:4px; overflow:hidden; border-radius:99px; background:#dce4ec; }
.inspector-next-progress span { display:block; width:33%; height:100%; border-radius:inherit; background:#20bf66; transition:width .22s ease; }
.inspector-next-kicker { margin-top:12px; color:#169e52; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.7px; }
.inspector-next-card h2 { margin:18px 0 0; color:inherit; font:800 clamp(21px,3vw,27px)/1.15 'Inter',sans-serif; letter-spacing:-.6px; }
.inspector-next-copy { margin:8px 0 20px; color:#64748b; font-size:11px; line-height:1.5; }
.inspector-next-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.inspector-next-option {
  min-width:0;
  min-height:92px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 16px;
  align-items:center;
  gap:11px;
  padding:14px;
  border:1px solid #dce4ec;
  border-radius:15px;
  color:#172033;
  background:rgba(255,255,255,.76);
  text-align:left;
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.inspector-next-option:hover,
.inspector-next-option:focus-visible { transform:translateY(-1px); border-color:#85dba9; background:#f4fcf7; box-shadow:0 8px 22px rgba(30,53,76,.08); outline:none; }
.inspector-next-option-icon { width:38px; height:38px; display:grid; place-items:center; border:1px solid #dce4ec; border-radius:11px; color:#159650; background:#effbf4; font:800 12px/1 'Inter',sans-serif; }
.inspector-next-option strong { display:block; font-size:12px; line-height:1.2; }
.inspector-next-option small { display:block; margin-top:5px; color:#64748b; font-size:9px; line-height:1.38; }
.inspector-next-option > i { color:#20bf66; font:700 15px/1 'Inter',sans-serif; font-style:normal; }
.inspector-next-footer { min-height:34px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:18px; padding-top:14px; border-top:1px solid rgba(203,213,225,.8); }
.inspector-next-footer > span { margin-left:auto; color:#8292a8; font-size:8px; font-weight:650; text-align:right; }
.inspector-next-back { min-height:32px; display:inline-flex; align-items:center; gap:6px; padding:0 11px; border:1px solid #dce4ec; border-radius:9px; color:#52657c; background:#fff; font:700 9px 'Inter',sans-serif; cursor:pointer; }
.inspector-next-back[hidden] { display:none; }
.inspector-next-back:hover { color:#159650; border-color:#85dba9; }

html:is([data-theme="dark"], [data-theme="modern"]) .inspector-next-row { background:linear-gradient(180deg,transparent 0,var(--surface-2) 34%); }
html:is([data-theme="dark"], [data-theme="modern"]) .inspector-next-card {
  color:var(--t1);
  border-color:var(--border-h);
  background:color-mix(in srgb,var(--surface-2) 84%,transparent);
}
html:is([data-theme="dark"], [data-theme="modern"]) .inspector-next-close,
html:is([data-theme="dark"], [data-theme="modern"]) .inspector-next-option,
html:is([data-theme="dark"], [data-theme="modern"]) .inspector-next-back {
  color:var(--t1);
  border-color:var(--border);
  background:color-mix(in srgb,var(--surface) 86%,transparent);
}
html:is([data-theme="dark"], [data-theme="modern"]) .inspector-next-option:hover { border-color:var(--accent); background:var(--accent-d); }
html:is([data-theme="dark"], [data-theme="modern"]) :is(.inspector-next-copy,.inspector-next-option small,.inspector-next-footer > span) { color:var(--t2); }
html:is([data-theme="dark"], [data-theme="modern"]) .inspector-next-option-icon { color:var(--accent); border-color:var(--border); background:var(--accent-d); }

/* Fluid workspace sizing. Desktop keeps map and inspector side-by-side;
   tablets stack them, and phones use the existing inspector bottom sheet. */
@media (min-width:1251px) {
  :root { --rhs-pane-w:clamp(404px,24vw,480px); }
  .content-row { padding-inline:clamp(22px,2.2vw,38px); gap:clamp(18px,1.6vw,28px); }
}

@media (max-width:1050px) and (min-width:641px) {
  body.workspace-focused { overflow:auto; }
  body.workspace-focused .main-area { min-height:100dvh; overflow:visible; }
  body.workspace-focused .content-row {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    height:auto;
    min-height:0;
    padding:14px clamp(12px,2.4vw,24px) 28px;
  }
  body.workspace-focused .map-stack { height:auto; }
  body.workspace-focused .map-wrap {
    flex:none;
    height:clamp(500px,64dvh,760px);
    min-height:500px;
  }
  body.workspace-focused .right-panel {
    width:100%;
    height:clamp(620px,76dvh,820px);
    min-height:620px;
    margin:0;
  }
  .right-pane-views { min-height:0; }
}

@media (max-width:640px) {
  body.workspace-focused .topbar { height:64px; min-height:64px; padding:8px 12px; }
  body.workspace-focused .content-row { height:calc(100dvh - var(--mob-nav-h)); min-height:0; padding:8px; }
  body.workspace-focused .map-stack { height:100%; }
  body.workspace-focused .map-wrap { height:100%; min-height:0; border-radius:16px; }
  body.workspace-focused .right-panel {
    max-height:min(78dvh,720px);
    border-radius:20px 20px 0 0;
    padding:0;
  }
  .right-pane-tabs { min-height:46px; }
  .right-pane-view { overscroll-behavior:contain; }
  .inspector-next-overlay { align-items:flex-end; padding:8px; }
  .inspector-next-card { width:100%; max-height:calc(100dvh - 16px); padding:24px 16px 16px; border-radius:22px; }
  .inspector-next-options { grid-template-columns:1fr; gap:8px; }
  .inspector-next-option { min-height:72px; padding:11px 12px; }
  .inspector-next-footer { position:sticky; bottom:-16px; padding-bottom:4px; background:inherit; }
  .inspector-next-row { display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1fr); }
  .inspector-back-button,
  .inspector-next-button { width:100%; min-width:0; }
}

@media (max-width:430px) {
  .right-pane-tab { min-width:68px; font-size:8px; }
  .inspector-view { padding:8px; gap:6px; }
  .inspector-view > .rp-section { padding:9px; }
  .map-search-control { left:10px; right:54px; width:auto; transform:none; }
  .inspector-next-card h2 { font-size:21px; }
  .inspector-next-option small { font-size:8.5px; }
}

@media (max-height:620px) and (orientation:landscape) {
  .inspector-next-card { max-height:calc(100dvh - 16px); padding-block:18px 14px; }
  .inspector-next-card h2 { margin-top:12px; }
  .inspector-next-copy { margin-bottom:12px; }
  .inspector-next-option { min-height:64px; }
}

/* Fluid workspace chrome ---------------------------------------------------
   Map-adjacent panels now derive their size and placement from the available
   map container instead of relying on one desktop pixel width. */
body.workspace-focused {
  --workspace-pane-fluid:clamp(320px,23vw,380px);
  --workspace-left-fluid:var(--workspace-pane-fluid);
  --workspace-right-fluid:var(--workspace-pane-fluid);
}
.map-wrap {
  --map-edge-fluid:clamp(8px,1.15cqw,14px);
  --map-tool-offset:clamp(42px,4.5cqw,48px);
  --map-layer-fluid:clamp(148px,17cqw,194px);
  --map-legend-fluid:clamp(146px,18cqw,214px);
}

.layer-card-heading {
  width:100%;
  border:0;
  background:transparent;
  font-family:inherit;
  padding:0 0 7px;
  text-align:left;
  cursor:pointer;
}
.layer-card-chevron { transition:transform .2s ease; }
.map-layer-body { min-width:0; }
.map-layer-card.collapsed { width:auto !important; min-width:126px; padding-bottom:4px; }
.map-layer-card.collapsed .map-layer-body { display:none; }
.map-layer-card.collapsed .layer-card-heading { padding-bottom:4px; }
.map-layer-card.collapsed .layer-card-chevron { transform:rotate(180deg); }
.map-layer-card:is(.basemap-hidden, .user-hidden) { display:none !important; }

/* Compact zoom controls leave more room for map content on every viewport. */
.map-wrap .leaflet-control-zoom a {
  width:26px !important;
  height:26px !important;
  line-height:26px !important;
  font-size:15px !important;
}

body.workspace-focused .sidebar {
  width:var(--workspace-left-fluid);
  min-width:var(--workspace-left-fluid);
  padding-inline:clamp(10px,1vw,16px);
}
body.workspace-focused .sidebar-brand .brand-logo { width:min(150px,100%); }
body.workspace-focused .content-row {
  grid-template-columns:minmax(0,1fr) var(--workspace-right-fluid);
  gap:clamp(12px,1.5vw,24px);
  padding-inline:clamp(14px,2vw,32px);
}
body.workspace-focused .right-panel {
  width:var(--workspace-right-fluid);
  min-width:0;
  max-width:100%;
}

.map-layer-card,
body.workspace-focused .map-layer-card {
  right:calc(var(--map-edge-fluid) + var(--map-tool-offset));
  bottom:clamp(18px,3vh,36px);
  width:var(--map-layer-fluid);
  max-width:calc(100% - 76px);
  padding:clamp(8px,1cqw,11px);
}
.map-layer-card .layer-card-heading { font-size:clamp(6.5px,.72cqw,8px); }
.map-layer-card .toggle-label { font-size:clamp(7.5px,.8cqw,9px); }

.map-basemap-control {
  right:calc(var(--map-edge-fluid) + var(--map-tool-offset) + var(--map-layer-fluid) + 8px);
  bottom:clamp(18px,3vh,36px);
  width:var(--map-layer-fluid);
  max-width:calc(100% - 76px);
}
.map-basemap-control.open {
  right:calc(var(--map-edge-fluid) + var(--map-tool-offset));
}
.map-wrap .leaflet-top.leaflet-left {
  right:var(--map-edge-fluid);
  bottom:clamp(18px,3vh,36px);
}

.map-legend {
  left:var(--map-edge-fluid);
  bottom:clamp(10px,2vh,18px);
  width:var(--map-legend-fluid);
  max-width:calc(100% - 82px);
  max-height:min(48%,320px);
  padding:clamp(9px,1cqw,14px);
}
.map-legend .legend-header strong { font-size:clamp(9px,1cqw,12px); }
.map-legend:not(.collapsed) #legendBody { display:block; }
.map-legend.collapsed #legendBody { display:none; }
.buffer-legend {
  left:calc(var(--map-edge-fluid) + var(--map-legend-fluid) + 10px);
  bottom:clamp(10px,2vh,18px);
  min-width:clamp(145px,16cqw,180px);
  max-width:calc(100% - var(--map-legend-fluid) - 96px);
}

.right-pane-tabs { grid-auto-flow:column; overflow-x:auto; scrollbar-width:none; }
.right-pane-tabs::-webkit-scrollbar { display:none; }
.right-pane-tab { font-size:clamp(8px,.72vw,10px); }
.inspector-view { padding:clamp(8px,1vw,12px); }
.inspector-view > .rp-section { padding:clamp(8px,.9vw,11px); }

@media (min-width:1051px) and (max-width:1250px) {
  body.workspace-focused {
    --workspace-pane-fluid:clamp(285px,24vw,300px);
    --workspace-left-fluid:var(--workspace-pane-fluid);
    --workspace-right-fluid:var(--workspace-pane-fluid);
  }
  body.workspace-focused .content-row {
    grid-template-columns:minmax(0,1fr) var(--workspace-right-fluid);
    padding-inline:clamp(14px,1.8vw,24px);
  }
}

@media (max-width:1050px) {
  body.workspace-focused .sidebar {
    width:min(400px,92vw);
    min-width:min(400px,92vw);
    padding-inline:14px;
  }
  body.workspace-focused .sidebar:is(.open,.mobile-open) { transform:translateX(0); }
  body.workspace-focused .sidebar:is(.open,.mobile-open) .sidebar-filter-pane { display:flex; }
  body.workspace-focused .content-row { grid-template-columns:minmax(0,1fr); }
  body.workspace-focused .right-panel { width:100%; }
  .map-wrap {
    --map-layer-fluid:clamp(154px,22cqw,190px);
    --map-legend-fluid:clamp(152px,24cqw,210px);
  }
}

@media (max-width:640px) {
  .map-wrap {
    --map-edge-fluid:8px;
    --map-tool-offset:40px;
    --map-layer-fluid:clamp(142px,42cqw,174px);
    --map-legend-fluid:clamp(138px,42cqw,184px);
  }
  .map-layer-card,
  body.workspace-focused .map-layer-card {
    right:calc(var(--map-edge-fluid) + var(--map-tool-offset));
    bottom:62px;
    width:var(--map-layer-fluid);
    max-height:min(54%,310px);
    overflow:auto;
    transform:none;
  }
  .map-basemap-control {
    right:calc(var(--map-edge-fluid) + var(--map-tool-offset) + var(--map-layer-fluid) + 7px);
    bottom:62px;
    width:var(--map-layer-fluid);
  }
  .map-wrap .leaflet-top.leaflet-left { right:var(--map-edge-fluid); bottom:62px; }
  .map-legend {
    left:var(--map-edge-fluid);
    right:auto;
    bottom:8px;
    width:var(--map-legend-fluid);
    max-width:calc(100% - 76px);
    max-height:min(44%,280px);
  }
  .map-legend:not(.collapsed) { overflow-y:auto; }
  .map-legend:not(.collapsed) #legendBody { display:block; }
  .map-legend.collapsed { max-height:42px; }
  .buffer-legend { left:var(--map-edge-fluid); bottom:58px; max-width:min(190px,calc(100% - 74px)); }
  .right-pane-tabs { display:flex; }
  .right-pane-tab { flex:1 0 78px; }
}

@media (max-width:380px) {
  .map-basemap-control {
    right:calc(var(--map-edge-fluid) + var(--map-tool-offset));
    bottom:min(58%,250px);
  }
  .map-layer-card.collapsed { min-width:118px; }
  .map-legend { width:min(156px,calc(100% - 72px)); }
  .right-pane-tab { flex-basis:72px; }
}

/* Compact workspace header: search now lives on the map, so only the utility
   controls need reserved space above the map. */
body.workspace-focused .topbar {
  height:56px;
  min-height:56px;
  padding:0 clamp(12px,2vw,32px);
}
body.workspace-focused .export-report-btn {
  top:10px;
  right:clamp(12px,2vw,32px);
}
body.workspace-focused .theme-switcher {
  top:10px;
  right:clamp(154px,11vw,172px);
}
body.workspace-focused #gee-indicator {
  top:14px;
  right:clamp(282px,22vw,330px);
}
body.workspace-focused .content-row { padding-top:6px; }
body.workspace-focused .mobile-menu-btn { top:10px; left:clamp(10px,2vw,18px); }

@media (min-width:1051px) {
  body.workspace-focused .sidebar {
    padding-left:12px;
    padding-right:0;
    padding-bottom:12px;
  }
  body.workspace-focused .content-row {
    height:calc(100dvh - 56px);
    min-height:calc(100dvh - 56px);
  }
}

@media (max-width:640px) {
  body.workspace-focused .topbar { height:58px; min-height:58px; padding-inline:10px; }
  body.workspace-focused .export-report-btn { top:10px; right:10px; }
  body.workspace-focused .theme-switcher { top:10px; right:150px; }
  body.workspace-focused .content-row { padding-top:6px; }
}

/* ── Envra soft-canvas interface ───────────────────────────────
   A quiet blue-gray workspace and translucent white surfaces keep the map
   visually dominant while preserving clear panel boundaries. */
html[data-theme="light"] {
  --bg:#f4f7fa;
  --sidebar:rgba(255,255,255,.86);
  --surface:rgba(255,255,255,.88);
  --surface-2:rgba(247,250,252,.84);
  --surface-3:#eef4f7;
  --border:#dbe5eb;
  --border-h:#91d8ae;
  --sh-md:0 10px 30px rgba(36,65,85,.08);
  --sh-lg:0 20px 52px rgba(36,65,85,.12);
  --map-legend-bg:rgba(255,255,255,.78);
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 12% 8%, rgba(32,191,102,.07), transparent 27rem),
    radial-gradient(circle at 92% 4%, rgba(60,134,232,.07), transparent 30rem),
    #f4f7fa;
}

html[data-theme="light"] :is(.app-shell, .main-area, .content-row) {
  background:transparent;
}

html[data-theme="light"] .topbar {
  background:rgba(255,255,255,.78);
  border-bottom-color:rgba(206,219,227,.82);
  -webkit-backdrop-filter:blur(20px) saturate(145%);
  backdrop-filter:blur(20px) saturate(145%);
  box-shadow:0 8px 28px rgba(36,65,85,.055);
}

html[data-theme="light"] .sidebar,
html[data-theme="light"] body.workspace-focused .sidebar {
  background:rgba(255,255,255,.82);
  border-right-color:rgba(206,219,227,.86);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  backdrop-filter:blur(22px) saturate(145%);
  box-shadow:10px 0 34px rgba(36,65,85,.055);
}

html[data-theme="light"] .right-panel {
  background:rgba(248,251,253,.82);
  border-color:rgba(206,219,227,.88);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  backdrop-filter:blur(22px) saturate(145%);
  box-shadow:0 16px 42px rgba(36,65,85,.09);
}

html[data-theme="light"] .right-pane-tabs {
  background:rgba(255,255,255,.74);
  border-bottom-color:rgba(211,223,230,.84);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
}

html[data-theme="light"] :is(
  .rp-section,
  .rp-stat,
  .chart-card,
  .lf-card,
  .about-modal,
  .access-option,
  .next-action-prompt,
  .sidebar-filter-pane .map-setup-button
) {
  background:rgba(255,255,255,.88);
  border-color:rgba(211,223,230,.9);
  box-shadow:0 7px 22px rgba(36,65,85,.045);
}

html[data-theme="light"] .map-wrap {
  border-color:rgba(196,211,220,.92);
  background:#dce7ec;
  box-shadow:0 18px 44px rgba(36,65,85,.11);
}

html[data-theme="light"] :is(
  .map-layer-card,
  .map-basemap-control,
  .map-legend,
  .live-monitor-card,
  .map-search-control,
  .map-wrap .leaflet-control-zoom,
  .map-wrap .draw-toolbar
) {
  background:rgba(255,255,255,.72) !important;
  border-color:rgba(255,255,255,.74) !important;
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  backdrop-filter:blur(18px) saturate(145%);
  box-shadow:0 10px 28px rgba(36,65,85,.13) !important;
}

html[data-theme="light"] :is(.ctrl-select, .map-layer-filter .ctrl-select) {
  background-color:rgba(247,250,252,.9);
  border-color:#dbe5eb;
}

html[data-theme="light"] .sidebar-help {
  background:rgba(255,255,255,.76);
  border-color:rgba(206,219,227,.9);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

html[data-theme="light"] .about-overlay {
  background:rgba(32,47,58,.36);
  -webkit-backdrop-filter:blur(10px) saturate(115%);
  backdrop-filter:blur(10px) saturate(115%);
}

/* Map controls sized to the approved compact reference. */
.map-wrap .leaflet-top.leaflet-left {
  align-items:flex-end;
}
.map-wrap :is(.leaflet-control-zoom, .draw-toolbar) {
  width:34px !important;
  min-width:34px;
  max-width:34px;
  box-sizing:border-box;
  border-radius:10px !important;
}
.map-wrap .leaflet-control-zoom a {
  width:32px !important;
  height:31px !important;
  line-height:31px !important;
  font-size:16px !important;
}
.map-wrap .draw-toolbar {
  padding:2px !important;
  gap:1px;
}
.map-wrap .draw-toolbar .draw-btn,
.map-wrap .map-utility-toolbar .draw-btn {
  width:28px;
  min-width:28px;
  height:30px;
  border-radius:8px;
}
.map-wrap .draw-toolbar .draw-btn svg {
  width:14px;
  height:14px;
}

/* Shared Live Monitor glass treatment for every floating map surface. */
.map-wrap :is(
  .map-layer-card,
  .map-basemap-control,
  .map-legend,
  .live-monitor-card,
  .buffer-legend,
  .map-search-control .search-box,
  .leaflet-control-zoom,
  .draw-toolbar,
  .leaflet-popup-content-wrapper
) {
  background:rgba(255,255,255,.82) !important;
  border-color:rgba(255,255,255,.88) !important;
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 10px 28px rgba(30,53,76,.10) !important;
}
.map-wrap :is(.map-layer-card, .map-basemap-control, .map-legend, .live-monitor-card, .buffer-legend) {
  border-radius:18px;
}
.map-wrap .map-search-control .search-box { border-radius:22px; }
.map-wrap .leaflet-popup-content-wrapper { border-radius:16px !important; }
.map-wrap .leaflet-popup-tip { background:rgba(255,255,255,.88) !important; }
.map-wrap .raster-surface-overlay { image-rendering:auto; }

/* LGA Inspector readability scale. Keep these rules last so the compact,
   fluid workspace breakpoints cannot shrink the panel text again. */
.right-pane-tab[data-right-pane-tab="inspector"] { font-size:13px; }
.inspector-view .rp-section-title { font-size:16px; }
.inspector-view .rp-lga-name { font-size:32px; line-height:1.12; }
.inspector-view .rp-helper { font-size:15px; line-height:1.45; }
.inspector-view .rp-stat-label { font-size:16px; }
.inspector-view .rp-stat-value { font-size:32px; line-height:1.12; }
.inspector-view > .selected-lga-card { min-height:126px; }
.inspector-view > .inspector-stats-row { min-height:108px; }
.inspector-view > .isi-section { min-height:200px; }
.inspector-view .isi-content {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:16px;
}
.inspector-view .isi-gauge {
  position:relative;
  width:100%;
  height:108px;
  min-width:0;
  flex:none;
  padding:0;
  border:0;
  border-radius:0;
  font-size:32px;
}
.inspector-view .isi-gauge svg { width:100%; height:100%; overflow:visible; }
.inspector-view .isi-gauge :is(.isi-gauge-track, .isi-gauge-fill) {
  fill:none;
  stroke-width:18;
  stroke-linecap:round;
}
.inspector-view .isi-gauge-track { stroke:#e5ebf1; }
.inspector-view .isi-gauge-fill {
  stroke:var(--isi-color, #22c55e);
  stroke-dasharray:var(--isi-progress, 0) 100;
  transition:stroke-dasharray .45s ease, stroke .25s ease;
}
.inspector-view .isi-gauge-reading {
  position:absolute;
  left:50%;
  bottom:0;
  display:flex;
  align-items:baseline;
  justify-content:center;
  transform:translateX(-50%);
  color:#182133;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}
.inspector-view .isi-gauge small { font-size:15px; }
.inspector-view .isi-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.inspector-view .stat-badge { font-size:22px; }
.inspector-view .isi-copy p { font-size:15px; line-height:1.45; }
.inspector-view .risk-heading,
.inspector-view .risk-heading strong { font-size:13.5px; }
.inspector-view .eg-symbol { font-size:14px; }
.inspector-view .eg-name,
.inspector-view .eg-value { font-size:16px; }

@media (max-width:430px) {
  .inspector-view .isi-content { gap:10px; }
  .inspector-view .isi-gauge { height:86px; }
  .inspector-view .isi-gauge :is(.isi-gauge-track, .isi-gauge-fill) { stroke-width:15; }
  .inspector-view .stat-badge { font-size:19px; }
}

/* Embedded navigation guide. It uses the live dashboard controls and never
   obscures or disables the map. */
.navigation-guide {
  flex:0 0 auto;
  overflow:hidden;
  border:1px solid #dce5eb;
  border-radius:13px;
  background:rgba(255,255,255,.88);
  box-shadow:0 7px 22px rgba(36,65,85,.055);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.navigation-guide-toggle {
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0 14px;
  border:0;
  color:#182133;
  background:transparent;
  font:800 10px/1 'Inter',sans-serif;
  letter-spacing:.18px;
  cursor:pointer;
}
.navigation-guide-toggle > span { display:flex; align-items:center; gap:7px; }
.navigation-guide-toggle svg { color:#20bf66; }
.navigation-guide-toggle i {
  color:#7d8da2;
  font:700 12px/1 'Inter',sans-serif;
  transition:transform .2s ease;
}
.navigation-guide.collapsed .navigation-guide-toggle i { transform:rotate(180deg); }
.navigation-guide-body { padding:14px 14px 15px; }
.navigation-guide.collapsed .navigation-guide-body { display:none; }
.navigation-guide-progress {
  height:3px;
  overflow:hidden;
  border-radius:99px;
  background:#e7edf2;
}
.navigation-guide-progress span {
  display:block;
  width:20%;
  height:100%;
  border-radius:inherit;
  background:#20bf66;
  transition:width .24s ease;
}
.navigation-guide-step-label {
  margin-top:11px;
  color:#20a95b;
  font:800 8px/1 'Inter',sans-serif;
  letter-spacing:.62px;
  text-transform:uppercase;
}
.navigation-guide h2 {
  margin:6px 0 0;
  color:#182133;
  font:800 14px/1.2 'Inter',sans-serif;
  letter-spacing:-.15px;
}
.navigation-guide p {
  margin:7px 0 12px;
  color:#71839a;
  font:500 9.5px/1.5 'Inter',sans-serif;
}
.navigation-guide-steps {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:5px;
  margin:0;
  padding:0;
  list-style:none;
}
.navigation-guide-steps button {
  width:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:6px 2px;
  border:0;
  border-radius:8px;
  color:#8a99ab;
  background:transparent;
  cursor:pointer;
}
.navigation-guide-steps button span {
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border:1px solid #dce5eb;
  border-radius:50%;
  background:#f7f9fb;
  font:800 8px/1 'Inter',sans-serif;
}
.navigation-guide-steps button strong {
  max-width:100%;
  overflow:hidden;
  font:700 7.5px/1 'Inter',sans-serif;
  text-overflow:ellipsis;
}
.navigation-guide-steps button:hover { color:#182133; background:#f5f8fa; }
.navigation-guide-steps button.complete span {
  color:#fff;
  border-color:#20bf66;
  background:#20bf66;
}
.navigation-guide-steps button.active { color:#169951; background:#edfaf3; }
.navigation-guide-steps button.active span {
  color:#169951;
  border-color:#67d394;
  background:#fff;
  box-shadow:0 0 0 2px rgba(32,191,102,.12);
}
.navigation-guide-summary {
  min-height:27px;
  margin-top:11px;
  padding:8px 9px;
  border-radius:7px;
  color:#66788e;
  background:#f6f8fa;
  font:650 8px/1.4 'Inter',sans-serif;
}
.navigation-guide-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  margin-top:11px;
}
.navigation-guide-actions button {
  min-height:33px;
  padding:0 13px;
  border:1px solid #dce5eb;
  border-radius:8px;
  font:750 9px/1 'Inter',sans-serif;
  cursor:pointer;
}
.navigation-guide-back { color:#66788e; background:#fff; }
.navigation-guide-next { color:#fff; border-color:#20bf66 !important; background:#20bf66; }
.navigation-guide-next:hover { background:#19aa59; }
.guide-focus {
  position:relative;
  z-index:2;
  border-radius:10px;
  outline:2px solid rgba(32,191,102,.30);
  outline-offset:3px;
  box-shadow:0 0 0 7px rgba(32,191,102,.05),0 0 20px rgba(32,191,102,.085) !important;
  transition:outline-color .2s ease,box-shadow .2s ease;
}
.map-wrap.guide-focus,
.right-panel.guide-focus { outline-offset:3px; }

html:is([data-theme="dark"], [data-theme="modern"]) .navigation-guide {
  border-color:var(--border);
  background:color-mix(in srgb,var(--surface) 91%,transparent);
  box-shadow:var(--sh-sm);
}
html:is([data-theme="dark"], [data-theme="modern"]) .navigation-guide-toggle,
html:is([data-theme="dark"], [data-theme="modern"]) .navigation-guide h2 { color:var(--t1); }
html:is([data-theme="dark"], [data-theme="modern"]) .navigation-guide p { color:var(--t2); }
html:is([data-theme="dark"], [data-theme="modern"]) .navigation-guide-progress,
html:is([data-theme="dark"], [data-theme="modern"]) .navigation-guide-steps button span { border-color:var(--border); background:var(--surface-3); }
html:is([data-theme="dark"], [data-theme="modern"]) .navigation-guide-steps button:hover { color:var(--t1); background:var(--surface-3); }
html:is([data-theme="dark"], [data-theme="modern"]) .navigation-guide-steps button.active { color:var(--accent); background:var(--accent-d); }
html:is([data-theme="dark"], [data-theme="modern"]) .navigation-guide-summary { color:var(--t2); background:var(--surface-2); }
html:is([data-theme="dark"], [data-theme="modern"]) .navigation-guide-back { color:var(--t2); border-color:var(--border); background:var(--surface-2); }

/* Envra two-green brand system ------------------------------------------- */
:root {
  --brand-dark-green:#0a3a38;
  --brand-dark-green-hover:#062c2b;
  --brand-logo-green:#349365;
  --brand-logo-green-soft:rgba(52,147,101,.11);
  --brand-logo-green-ring:rgba(52,147,101,.2);
  --brand-logo-green-border:rgba(52,147,101,.46);
  --brand-logo-orange:#ff6a00;
}

html[data-theme="light"] {
  --border-h:var(--brand-logo-green-border);
  --accent:var(--brand-logo-green);
  --accent-d:var(--brand-logo-green-soft);
  --accent-g:0 0 0 3px var(--brand-logo-green-ring);
  --green:var(--brand-logo-green);
}

html[data-theme="light"] :is(
  .export-report-btn,
  .project-new-button,
  .apply-filter-btn,
  .access-next,
  .next-action-button.next-action-primary,
  .inspector-next-button,
  .navigation-guide-next
) {
  color:#fff;
  border-color:var(--brand-dark-green) !important;
  background:var(--brand-dark-green);
  box-shadow:0 8px 18px rgba(10,58,56,.18);
}

html[data-theme="light"] :is(
  .export-report-btn,
  .project-new-button,
  .apply-filter-btn,
  .access-next,
  .next-action-button.next-action-primary,
  .inspector-next-button,
  .navigation-guide-next
):hover {
  color:#fff;
  border-color:var(--brand-dark-green-hover) !important;
  background:var(--brand-dark-green-hover);
}

html[data-theme="light"] .map-layer-card .layer-toggle input:checked ~ .toggle-track,
html[data-theme="light"] .map-layer-card .fixed-active-dot,
html[data-theme="light"] .live-monitor-card small i,
html[data-theme="light"] .rp-header::before,
html[data-theme="light"] .right-pane-tab.active::after,
html[data-theme="light"] .navigation-guide-progress span,
html[data-theme="light"] .navigation-guide-steps button.complete span,
html[data-theme="light"] .inspector-next-progress span,
html[data-theme="light"] .access-wizard-progress span,
html[data-theme="light"] .access-chart-choice input:checked + .access-chart-switch {
  background:var(--brand-logo-green);
}

html[data-theme="light"] :is(
  .nav-item:hover,
  .nav-item.active,
  .sidebar-help:hover,
  .right-pane-tab.active,
  .navigation-guide-toggle svg,
  .navigation-guide-step-label,
  .navigation-guide-steps button.active,
  .navigation-guide-steps button.active span,
  .next-action-button:hover,
  .next-action-button.active,
  .next-action-utilities button:hover,
  .inspector-next-kicker,
  .inspector-next-option > i,
  .inspector-next-option-icon,
  .inspector-next-back:hover,
  .basemap-list-option i,
  .dl-btn:hover,
  .map-setup-button:hover,
  #saPanel .sa-tab.active,
  #gasPanel .sa-tab.active
) {
  color:var(--brand-logo-green);
}

html[data-theme="light"] :is(
  .nav-item.active,
  .access-option.selected,
  .basemap-list-option.active,
  .navigation-guide-steps button.active,
  .inspector-next-option:hover,
  .inspector-next-option:focus-visible
) {
  border-color:var(--brand-logo-green-border);
  background:var(--brand-logo-green-soft);
}

html[data-theme="light"] :is(
  .search-box:focus-within,
  .ctrl-select:focus,
  .access-state-field select:focus
) {
  border-color:var(--brand-logo-green-border);
  box-shadow:0 0 0 3px var(--brand-logo-green-ring);
}

html[data-theme="light"] .navigation-guide-steps button.active span {
  border-color:var(--brand-logo-green-border);
  background:#fff;
  box-shadow:0 0 0 2px var(--brand-logo-green-ring);
}

html[data-theme="light"] .guide-focus {
  outline-color:rgba(52,147,101,.30);
  box-shadow:0 0 0 7px rgba(52,147,101,.05),0 0 20px rgba(52,147,101,.085) !important;
}

html[data-theme="light"] .basemap-list-option.active svg {
  stroke:var(--brand-logo-green);
}

html[data-theme="light"] .strip-card .strip-icon svg {
  stroke:var(--brand-logo-green) !important;
}

html[data-theme="light"] :is(#saPanel .sa-tab.active, #gasPanel .sa-tab.active) {
  border-bottom-color:var(--brand-logo-green);
}

/* Right-pane scale follows the pane itself, not the browser viewport. */
.right-panel {
  container-name:right-pane;
  container-type:inline-size;
}

.right-panel .right-pane-tabs {
  flex-basis:clamp(42px,12cqw,52px);
  padding-inline:clamp(6px,2.5cqw,12px);
}
.right-panel .right-pane-tab {
  min-width:0;
  padding-inline:clamp(4px,1.8cqw,9px);
  font-size:clamp(8px,2.55cqw,11px);
}
.right-panel .right-pane-tab[data-right-pane-tab="inspector"] {
  min-width:clamp(78px,25cqw,112px);
  font-size:clamp(10px,3.05cqw,14px);
}
.right-panel .right-pane-tab[data-right-pane-tab="landfills"] {
  min-width:clamp(62px,19cqw,82px);
}

.right-panel .inspector-view {
  gap:clamp(6px,2.2cqw,10px);
  padding:clamp(8px,2.8cqw,14px);
}
.right-panel .inspector-view > .rp-section {
  padding:clamp(9px,3cqw,14px);
  border-radius:clamp(10px,3.2cqw,15px);
}
.right-panel .inspector-view > .selected-lga-card { min-height:clamp(92px,30cqw,132px); }
.right-panel .inspector-view > .inspector-stats-row { min-height:clamp(78px,25cqw,110px); }
.right-panel .inspector-view > .isi-section { min-height:clamp(150px,48cqw,210px); }
.right-panel .inspector-view > .risk-indicator-card { min-height:clamp(50px,15cqw,68px); }
.right-panel .inspector-view > .emission-summary-card { min-height:clamp(126px,38cqw,170px); }
.right-panel .inspector-view > .proximity-card { min-height:clamp(66px,19cqw,88px); }
.right-panel .inspector-view .rp-stat {
  min-height:clamp(72px,23cqw,104px);
  padding:clamp(8px,2.7cqw,13px);
}

.right-panel .inspector-view .rp-section-title { font-size:clamp(11px,3.35cqw,16px); }
.right-panel .inspector-view .rp-lga-name { font-size:clamp(22px,7cqw,32px); }
.right-panel .inspector-view .rp-helper { font-size:clamp(10px,3.25cqw,15px); }
.right-panel .inspector-view .rp-stat-label { font-size:clamp(11px,3.4cqw,16px); }
.right-panel .inspector-view .rp-stat-value { font-size:clamp(22px,7cqw,32px); }
.right-panel .inspector-view .isi-content {
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(10px,4cqw,18px);
}
.right-panel .inspector-view .isi-gauge {
  height:clamp(82px,28cqw,118px);
  font-size:clamp(23px,7cqw,32px);
}
.right-panel .inspector-view .isi-gauge small { font-size:clamp(10px,3.2cqw,15px); }
.right-panel .inspector-view .stat-badge { font-size:clamp(16px,4.9cqw,22px); }
.right-panel .inspector-view .isi-copy p { font-size:clamp(10px,3.2cqw,15px); }
.right-panel .inspector-view .risk-heading,
.right-panel .inspector-view .risk-heading strong { font-size:clamp(10px,2.9cqw,13.5px); }
.right-panel .inspector-view .eg-symbol { font-size:clamp(10px,3cqw,14px); }
.right-panel .inspector-view .eg-name,
.right-panel .inspector-view .eg-value { font-size:clamp(11px,3.5cqw,16px); }
.right-panel .inspector-view .emission-gas {
  min-height:clamp(32px,10cqw,44px);
  padding-block:clamp(5px,1.8cqw,8px);
}
.right-panel .inspector-view .prox-icon {
  width:clamp(26px,8cqw,36px);
  height:clamp(26px,8cqw,36px);
}

.navigation-guide-auto-hint {
  margin-left:auto;
  color:#71839a;
  font:650 8px/1.25 'Inter',sans-serif;
  text-align:right;
}

@container right-pane (max-width:340px) {
  .inspector-view .isi-content { grid-template-columns:44% minmax(0,1fr); }
  .inspector-view .isi-gauge :is(.isi-gauge-track, .isi-gauge-fill) { stroke-width:15; }
}

/* Compact charts in the right pane instead of stretching them to its height. */
.right-panel .charts-view .bottom-row,
body.workspace-focused .right-panel .charts-view .bottom-row,
body.workspace-focused.workspace-charts-visible .right-panel .charts-view .bottom-row {
  flex:0 0 auto;
  height:auto;
  min-height:0;
}
.right-panel .charts-view .charts-row {
  flex:0 0 auto;
  height:auto;
  min-height:0;
  gap:clamp(8px,2.7cqw,12px);
}
.right-panel .charts-view .chart-card {
  flex:0 0 clamp(170px,52cqw,210px);
  height:clamp(170px,52cqw,210px);
  min-height:0;
  padding:clamp(11px,3.4cqw,16px);
  border-radius:clamp(12px,3.6cqw,16px);
}
.right-panel .charts-view .chart-hdr {
  min-height:clamp(22px,6.5cqw,28px);
  font-size:clamp(10px,3.1cqw,14px);
}
.right-panel .charts-view .chart-plot {
  flex:1 1 auto;
  height:auto;
  min-height:0;
  margin-top:clamp(5px,1.8cqw,8px);
}

/* Keep the full inspector workflow visible on common laptop-height desktop
   viewports. This lives after the container-query sizing rules so its vertical
   constraints win when both width and height rules apply. */
@media (min-width:1051px) and (max-height:1050px) {
  body.workspace-focused .map-stack,
  body.workspace-focused .right-panel {
    height:auto;
    min-height:0;
    align-self:stretch;
  }
  .right-panel .inspector-view {
    gap:6px;
    padding:8px 10px;
  }
  .right-panel .inspector-view > .rp-section { padding:9px 11px; }
  .right-panel .inspector-view > .selected-lga-card { min-height:96px; max-height:126px; flex:.7 1 96px; }
  .right-panel .inspector-view > .inspector-stats-row { min-height:78px; max-height:108px; flex:.7 1 78px; }
  .right-panel .inspector-view > .isi-section { min-height:148px; max-height:180px; flex:1 1 148px; }
  .right-panel .inspector-view > .risk-indicator-card { min-height:50px; max-height:68px; flex:.5 1 50px; }
  .right-panel .inspector-view > .emission-summary-card { min-height:142px; max-height:170px; flex:.8 1 142px; }
  .right-panel .inspector-view > .proximity-card { min-height:64px; max-height:88px; flex:.6 1 64px; }
  .right-panel .inspector-view .rp-stat { min-height:72px; }
  .right-panel .inspector-view .isi-gauge {
    height:88px;
    font-size:clamp(23px,6cqw,28px);
  }
  .right-panel .inspector-view .rp-lga-name,
  .right-panel .inspector-view .rp-stat-value { font-size:clamp(22px,6cqw,28px); }
  .right-panel .inspector-next-row {
    position:sticky;
    bottom:0;
    margin-top:auto;
  }
}

/* Separate the workspace controls from the brand header. The logo now sits on
   the page canvas while the left controls use the same floating-panel language
   as the map and inspector. */
@media (min-width:1051px) {
  html[data-theme="light"] body.workspace-focused .sidebar,
  body.workspace-focused .sidebar {
    padding-top:0;
    padding-bottom:14px;
    overflow:hidden;
    border-right:0;
    background:transparent;
    box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  body.workspace-focused .sidebar-brand {
    height:56px;
    min-height:56px;
    flex:0 0 56px;
    padding:8px 10px 4px;
  }
  body.workspace-focused .sidebar-brand .brand-logo {
    width:142px;
    height:44px;
  }
  html[data-theme="light"] body.workspace-focused .sidebar-filter-pane,
  body.workspace-focused .sidebar-filter-pane {
    flex:1 1 auto;
    min-height:0;
    margin-top:6px;
    padding:14px;
    overflow-x:hidden;
    overflow-y:auto;
    border:1px solid rgba(206,219,227,.88);
    border-radius:22px;
    background:rgba(248,251,253,.82);
    box-shadow:0 16px 42px rgba(36,65,85,.09);
    -webkit-backdrop-filter:blur(22px) saturate(145%);
    backdrop-filter:blur(22px) saturate(145%);
  }
}

/* Keep the compact workspace header as alignment space for the logo and export
   action without rendering it as a separate white strip. */
html[data-theme="light"] body.workspace-focused .topbar {
  border:0;
  background:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* Tighten the handoff from the compact header controls into the workspace
   panes. The logo and Export action now sit close to, but clear of, the cards. */
@media (min-width:1051px) {
  html[data-theme="light"] body.workspace-focused .sidebar,
  body.workspace-focused .sidebar { padding-bottom:12px; }
  body.workspace-focused:not(.workspace-charts-visible) .content-row,
  body.workspace-focused.workspace-charts-visible .content-row {
    gap:12px;
    height:calc(100dvh - 56px);
    min-height:0;
    align-items:start;
    padding-top:0;
    padding-bottom:0;
    padding-inline:12px;
  }
  html[data-theme="light"] body.workspace-focused .sidebar-filter-pane,
  body.workspace-focused .sidebar-filter-pane { margin-top:0; }
  body.workspace-focused:not(.workspace-charts-visible) .map-stack,
  body.workspace-focused.workspace-charts-visible .map-stack {
    height:calc(100dvh - 20px);
    min-height:0;
    max-height:calc(100dvh - 20px);
    align-self:start;
    margin-top:-48px;
  }
  body.workspace-focused:not(.workspace-charts-visible) .right-panel,
  body.workspace-focused.workspace-charts-visible .right-panel {
    height:calc(100dvh - 20px);
    min-height:0;
    max-height:calc(100dvh - 20px);
    align-self:start;
    margin-top:-48px;
  }
  body.workspace-focused :is(.sidebar-filter-pane,.map-wrap,.right-panel) {
    border-radius:22px;
  }
}

/* Keep report generation with the rest of the analysis workflow instead of
   presenting a duplicate, detached action in the global header. */
.sidebar-filter-pane .export-report-action {
  width:100%;
  justify-content:center;
  border-color:var(--brand-dark-green,#0a3a38);
  color:#fff;
  background:var(--brand-dark-green,#0a3a38);
  box-shadow:0 7px 16px rgba(10,58,56,.14);
}
.sidebar-filter-pane #reportActionGroup[hidden],
.sidebar-filter-pane .export-report-action[hidden] {
  display:none !important;
}
.sidebar-filter-pane .export-report-action:hover {
  color:#fff;
  border-color:#0d4d49;
  background:#0d4d49;
}

/* A single translucent material across every floating map control keeps the
   controls legible while allowing the basemap to remain visually continuous. */
.map-wrap {
  --map-glass-surface:color-mix(in srgb,var(--surface) 68%,transparent);
  --map-glass-border:color-mix(in srgb,var(--border) 58%,transparent);
}
.map-wrap :is(
  .map-layer-card,
  .map-basemap-control,
  .map-legend,
  .live-monitor-card,
  .buffer-legend,
  .map-search-control .search-box,
  .leaflet-control-zoom,
  .draw-toolbar,
  .leaflet-popup-content-wrapper,
  .leaflet-control-attribution,
  .leaflet-tooltip
) {
  background:var(--map-glass-surface) !important;
  border-color:var(--map-glass-border) !important;
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  backdrop-filter:blur(18px) saturate(145%);
  box-shadow:0 10px 28px rgba(30,53,76,.10) !important;
}
.map-wrap .map-search-control {
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.map-wrap :is(
  .leaflet-bar a,
  .draw-toolbar .draw-btn,
  .map-utility-toolbar .draw-btn,
  .basemap-list-heading,
  .basemap-list-option,
  .map-layer-filter .ctrl-select,
  .map-filter-stack .ctrl-select
) {
  background:color-mix(in srgb,var(--surface) 34%,transparent) !important;
}
.map-wrap .leaflet-popup-tip {
  background:var(--map-glass-surface) !important;
}

/* Compact map legend: show only the active scale and category names. */
.map-legend #legendBody {
  margin-top:5px;
  padding-top:6px;
}
.map-legend #legendContent { gap:7px; }
.map-legend .legend-simple-scale { display:grid; gap:3px; }
.map-legend .legend-gradient { height:8px; }
.map-legend .legend-gradient-labels {
  margin-top:0;
  font-size:8px;
}
.legend-compact-categories {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px 8px;
}
.legend-compact-item {
  min-width:0;
  display:flex;
  align-items:center;
  gap:5px;
}
.legend-compact-swatch {
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:3px;
  box-shadow:0 0 0 1px rgba(255,255,255,.58);
}
.legend-compact-label {
  overflow:hidden;
  color:var(--t2);
  font-size:8px;
  font-weight:700;
  line-height:1.15;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Inspector state polish: selected regions use a concise summary card and the
   five-step risk scale visibly reflects the current severity classification. */
.right-panel .inspector-view > .selected-lga-card.has-selection {
  min-height:96px;
  max-height:108px;
  flex:0 1 auto;
}
.inspector-view .risk-indicator-card[data-risk="low"] .risk-heading strong { color:#22c55e; }
.inspector-view .risk-indicator-card[data-risk="moderate"] .risk-heading strong { color:#ca8a04; }
.inspector-view .risk-indicator-card[data-risk="elevated"] .risk-heading strong { color:#f97316; }
.inspector-view .risk-indicator-card[data-risk="high"] .risk-heading strong { color:#dc2626; }
.inspector-view .risk-indicator-card[data-risk="critical"] .risk-heading strong { color:#991b1b; }
.inspector-view .risk-track i.active:nth-child(1) { background:#22c55e; }
.inspector-view .risk-track i.active:nth-child(2) { background:#eab308; }
.inspector-view .risk-track i.active:nth-child(3) { background:#f97316; }
.inspector-view .risk-track i.active:nth-child(4) { background:#dc2626; }
.inspector-view .risk-track i.active:nth-child(5) { background:#991b1b; }

/* Raster editing belongs with the input controls. A compact toolbar in the
   left pane keeps drawing actions discoverable without covering the map. */
.sidebar-raster-tools {
  width:100%;
  flex:0 0 auto;
  padding-top:11px;
  border-top:1px solid #e5ebf1;
}
.sidebar-raster-tools-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
  color:#52647a;
  font:800 9px/1 'Inter',sans-serif;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.sidebar-raster-tools-heading small {
  color:#91a0b5;
  font-size:7.5px;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
}
.sidebar-raster-tools-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
}
.sidebar-raster-tools-grid button {
  min-width:0;
  height:48px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:5px 3px;
  border:1px solid #dce4ec;
  border-radius:10px;
  color:#5f7086;
  background:rgba(255,255,255,.78);
  font:750 8px/1 'Inter',sans-serif;
  cursor:pointer;
  transition:border-color .18s ease,color .18s ease,background .18s ease,box-shadow .18s ease;
}
.sidebar-raster-tools-grid button svg {
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sidebar-raster-tools-grid button:hover {
  border-color:#8fd5ae;
  color:#187a50;
  background:#eff9f4;
}
.sidebar-raster-tools-grid button.active {
  border-color:#349365;
  color:#176845;
  background:#e8f6ee;
  box-shadow:0 0 0 2px rgba(52,147,101,.12);
}
.sidebar-raster-tools-grid .clear-raster-selection:hover {
  border-color:#f2b4ad;
  color:#b4463d;
  background:#fff3f1;
}

/* Keep the live metric visible without letting its card dominate the map. */
.map-wrap .live-monitor-card {
  width:156px;
  padding:10px 11px;
  border-radius:14px;
}
.map-wrap .live-monitor-card > span {
  margin-bottom:4px;
  font-size:7px;
}
.map-wrap .live-monitor-card strong {
  font-size:16px;
  line-height:1.08;
  letter-spacing:-.25px;
}
.map-wrap .live-monitor-card strong sub { font-size:8px; }
.map-wrap .live-monitor-card small {
  gap:5px;
  margin-top:5px;
  font-size:8px;
}
.map-wrap .live-monitor-card small i {
  width:6px;
  height:6px;
}

/* Use one emphasis scale across inspector names and values. This matches the
   severity label and prevents long landfill names from overpowering cards. */
.right-panel .inspector-view {
  --inspector-emphasis-size:clamp(16px,4.9cqw,22px);
}
.right-panel .inspector-view .selected-lga-card .rp-lga-name,
.right-panel .inspector-view .inspector-stats-row .rp-stat-value,
.right-panel .inspector-view .proximity-card .rp-stat-value {
  font-size:var(--inspector-emphasis-size);
  line-height:1.15;
}
.right-panel .inspector-view .proximity-card .rp-stat-value {
  overflow-wrap:anywhere;
}

@media (min-width:561px) {
  .map-wrap .map-search-control {
    width:clamp(200px,34%,320px);
  }
}

/* Keep map search compact so it does not compete with the live-map content. */
.map-wrap .map-search-control .search-box {
  height:32px;
  min-height:32px;
  padding-inline:11px;
  border-radius:18px;
}
.map-wrap .map-search-control .search-btn {
  min-height:22px;
  padding:2px 9px;
}

/* Give the guided Next action its own brighter CTA treatment. The glow lives
   on the button itself so it remains visible at the pane edge. */
.right-panel .inspector-next-button,
html[data-theme="light"] .right-panel .inspector-next-button {
  color:#fff;
  background:linear-gradient(135deg,#12805f 0%,#20bf66 100%);
  box-shadow:
    0 0 0 3px rgba(32,191,102,.18),
    0 0 22px rgba(32,191,102,.48),
    0 9px 18px rgba(10,58,56,.22);
  animation:inspector-next-glow 3.2s ease-in-out infinite;
}
.right-panel .inspector-next-button:hover,
html[data-theme="light"] .right-panel .inspector-next-button:hover {
  color:#fff;
  background:linear-gradient(135deg,#0e7054 0%,#18a958 100%);
  box-shadow:
    0 0 0 4px rgba(32,191,102,.22),
    0 0 28px rgba(32,191,102,.60),
    0 11px 22px rgba(10,58,56,.26);
  animation:none;
}
@keyframes inspector-next-glow {
  0%, 55%, 100% {
    box-shadow:0 0 0 3px rgba(32,191,102,.16),0 0 18px rgba(32,191,102,.40),0 9px 18px rgba(10,58,56,.22);
  }
  72% {
    box-shadow:0 0 0 5px rgba(32,191,102,.24),0 0 30px rgba(32,191,102,.64),0 9px 20px rgba(10,58,56,.24);
  }
}
@media (prefers-reduced-motion:reduce) {
  .right-panel .inspector-next-button,
  html[data-theme="light"] .right-panel .inspector-next-button {
    animation:none;
  }
}

/* Unify persistent primary actions with the brighter Envra green system.
   These remain quieter than Next so the guided workflow retains priority. */
body .sidebar-filter-pane .apply-filter-btn,
body .next-action-bar .next-action-button.export-report-action,
html[data-theme="light"] body .sidebar-filter-pane .apply-filter-btn,
html[data-theme="light"] body .next-action-bar .next-action-button.export-report-action,
html[data-theme="light"] .export-report-btn {
  color:#fff;
  border-color:#0e7054 !important;
  background:linear-gradient(135deg,#0c5f52 0%,#148f5b 100%);
  box-shadow:0 7px 16px rgba(10,93,75,.22);
}
body .sidebar-filter-pane .apply-filter-btn:hover,
body .next-action-bar .next-action-button.export-report-action:hover,
html[data-theme="light"] body .sidebar-filter-pane .apply-filter-btn:hover,
html[data-theme="light"] body .next-action-bar .next-action-button.export-report-action:hover,
html[data-theme="light"] .export-report-btn:hover {
  color:#fff;
  border-color:#0b684d !important;
  background:linear-gradient(135deg,#0a5549 0%,#107f51 100%);
  box-shadow:0 9px 20px rgba(10,93,75,.28);
}

/* Compact sidebar actions so their visual weight matches their short labels. */
body .sidebar-filter-pane .workspace-filter-actions {
  grid-template-columns:132px 76px;
  justify-content:center;
  gap:9px;
}
body .sidebar-filter-pane .workspace-filter-actions .apply-filter-btn {
  width:132px;
}
body .sidebar-filter-pane .workspace-filter-actions .reset-filter-btn {
  width:76px;
}
body .sidebar-filter-pane .next-action-buttons {
  width:100%;
  grid-column:1 / -1;
  justify-content:center;
}
body .sidebar-filter-pane .export-report-action {
  width:190px;
  max-width:100%;
  flex:0 0 auto;
  margin-inline:auto;
}

/* Apple-inspired Envra visual system --------------------------------------
   Preserve the environmental green identity while adopting a quieter canvas,
   translucent materials, system typography, and restrained interaction depth. */
:is(html:not([data-theme]),html[data-theme="light"]) {
  --apple-canvas:#f5f5f7;
  --apple-surface:rgba(255,255,255,.76);
  --apple-surface-strong:rgba(255,255,255,.90);
  --apple-fill:rgba(118,118,128,.08);
  --apple-border:rgba(60,60,67,.14);
  --apple-text:#1d1d1f;
  --apple-secondary:#6e6e73;
  --apple-green:#147d56;
  --apple-green-strong:#0b8f5b;
  --apple-shadow:0 12px 38px rgba(0,0,0,.075);
  color-scheme:light;
}
:is(html:not([data-theme]),html[data-theme="light"]) :is(body,button,input,select,textarea) {
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter","Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
:is(html:not([data-theme]),html[data-theme="light"]) :is(body,.app-shell,.main-area) {
  color:var(--apple-text);
  background:var(--apple-canvas);
}
:is(html:not([data-theme]),html[data-theme="light"]) .main-area {
  background:
    radial-gradient(circle at 16% 4%,rgba(20,125,86,.055),transparent 27%),
    radial-gradient(circle at 92% 96%,rgba(0,113,227,.035),transparent 30%),
    var(--apple-canvas);
}

/* Primary panes behave like one family of elevated translucent sheets. */
:is(html:not([data-theme]),html[data-theme="light"]) :is(.sidebar-filter-pane,.right-panel) {
  border:1px solid rgba(255,255,255,.84);
  border-radius:22px;
  background:var(--apple-surface);
  -webkit-backdrop-filter:blur(30px) saturate(170%);
  backdrop-filter:blur(30px) saturate(170%);
  box-shadow:var(--apple-shadow),0 0 0 1px rgba(60,60,67,.06);
}
:is(html:not([data-theme]),html[data-theme="light"]) .map-wrap {
  border:1px solid rgba(60,60,67,.10);
  border-radius:22px;
  box-shadow:0 10px 34px rgba(0,0,0,.07);
}

/* Cards are flatter and rely on spacing and hairlines rather than heavy depth. */
:is(html:not([data-theme]),html[data-theme="light"]) :is(
  .access-wizard,
  .rp-section,
  .rp-stat,
  .selected-lga-card,
  .proximity-card,
  .sidebar-raster-tools
) {
  border-color:var(--apple-border);
  border-radius:16px;
  background:rgba(255,255,255,.68);
  box-shadow:0 1px 2px rgba(0,0,0,.025);
}
:is(html:not([data-theme]),html[data-theme="light"]) :is(
  .rp-section-title,
  .rp-stat-label,
  .ctrl-label,
  .map-filter-title,
  .sidebar-raster-tools-title,
  .sidebar-raster-tools-subtitle
) {
  color:var(--apple-secondary);
  letter-spacing:.01em;
}
:is(html:not([data-theme]),html[data-theme="light"]) :is(
  .rp-lga-name,
  .rp-stat-value,
  .proximity-card .rp-stat-value,
  .live-monitor-card strong
) {
  color:var(--apple-text);
  letter-spacing:-.025em;
}

/* Inputs use Apple's quiet filled-control treatment. */
:is(html:not([data-theme]),html[data-theme="light"]) :is(.ctrl-select,.search-box,.search-input) {
  color:var(--apple-text);
}
:is(html:not([data-theme]),html[data-theme="light"]) .ctrl-select {
  border-color:transparent;
  border-radius:10px;
  background-color:var(--apple-fill);
  box-shadow:inset 0 0 0 1px rgba(60,60,67,.06);
}
:is(html:not([data-theme]),html[data-theme="light"]) .ctrl-select:hover {
  background-color:rgba(118,118,128,.11);
}
:is(html:not([data-theme]),html[data-theme="light"]) :is(.ctrl-select,.search-input):focus {
  outline:none;
}
:is(html:not([data-theme]),html[data-theme="light"]) :is(.ctrl-select:focus,.search-box:focus-within) {
  border-color:rgba(20,125,86,.42);
  box-shadow:0 0 0 3px rgba(20,125,86,.13);
}

/* Primary actions are flat Envra green; hierarchy comes from tone, not gloss. */
:is(html:not([data-theme]),html[data-theme="light"]) body .sidebar-filter-pane .apply-filter-btn,
:is(html:not([data-theme]),html[data-theme="light"]) body .next-action-bar .next-action-button.export-report-action {
  color:#fff;
  border-color:transparent !important;
  background:var(--apple-green) !important;
  box-shadow:0 4px 12px rgba(20,125,86,.20);
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}
:is(html:not([data-theme]),html[data-theme="light"]) body .sidebar-filter-pane .apply-filter-btn:hover,
:is(html:not([data-theme]),html[data-theme="light"]) body .next-action-bar .next-action-button.export-report-action:hover {
  color:#fff;
  background:#106e4b !important;
  box-shadow:0 6px 16px rgba(20,125,86,.24);
  transform:translateY(-1px);
}
:is(html:not([data-theme]),html[data-theme="light"]) .right-panel .inspector-next-button {
  color:#fff;
  text-transform:none;
  letter-spacing:0;
  background:var(--apple-green-strong) !important;
  box-shadow:0 0 0 3px rgba(11,143,91,.14),0 6px 16px rgba(11,143,91,.22) !important;
  animation:none !important;
}
:is(html:not([data-theme]),html[data-theme="light"]) .right-panel .inspector-next-button:hover {
  color:#fff;
  background:#087c4f !important;
  box-shadow:0 0 0 4px rgba(11,143,91,.16),0 8px 18px rgba(11,143,91,.26) !important;
}

/* Secondary actions remain neutral and tactile. */
:is(html:not([data-theme]),html[data-theme="light"]) .workspace-filter-actions .reset-filter-btn {
  color:#3a3a3c;
  border:1px solid var(--apple-border);
  background:rgba(255,255,255,.72);
  box-shadow:none;
}
:is(html:not([data-theme]),html[data-theme="light"]) .workspace-filter-actions .reset-filter-btn:hover {
  color:var(--apple-text);
  background:rgba(118,118,128,.10);
}
:is(html:not([data-theme]),html[data-theme="light"]) .sidebar-raster-tools-grid button {
  border-color:var(--apple-border);
  border-radius:12px;
  color:#515154;
  background:rgba(255,255,255,.58);
  box-shadow:none;
}
:is(html:not([data-theme]),html[data-theme="light"]) .sidebar-raster-tools-grid button:hover {
  border-color:rgba(20,125,86,.34);
  color:var(--apple-green);
  background:rgba(20,125,86,.07);
}
:is(html:not([data-theme]),html[data-theme="light"]) .next-action-utilities button {
  color:var(--apple-secondary);
}

/* Tabs and map chrome share the same translucent material language. */
:is(html:not([data-theme]),html[data-theme="light"]) .right-pane-tabs {
  border-bottom-color:rgba(60,60,67,.10);
  background:rgba(255,255,255,.48);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  backdrop-filter:blur(24px) saturate(160%);
}
:is(html:not([data-theme]),html[data-theme="light"]) .right-pane-tab {
  color:var(--apple-secondary);
  font-weight:600;
}
:is(html:not([data-theme]),html[data-theme="light"]) .right-pane-tab.active {
  color:var(--apple-text);
}
:is(html:not([data-theme]),html[data-theme="light"]) .inspector-next-row {
  background:linear-gradient(180deg,transparent,rgba(245,245,247,.90) 38%);
}
:is(html:not([data-theme]),html[data-theme="light"]) .map-wrap :is(
  .map-layer-card,
  .map-basemap-control,
  .map-legend,
  .live-monitor-card,
  .buffer-legend,
  .map-search-control .search-box,
  .leaflet-control-zoom,
  .draw-toolbar,
  .leaflet-popup-content-wrapper
) {
  border-color:rgba(255,255,255,.86) !important;
  background:rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter:blur(24px) saturate(170%);
  backdrop-filter:blur(24px) saturate(170%);
  box-shadow:0 8px 24px rgba(0,0,0,.09) !important;
}
:is(html:not([data-theme]),html[data-theme="light"]) .map-wrap .map-search-control .search-box {
  border-radius:16px;
}
:is(html:not([data-theme]),html[data-theme="light"]) .map-wrap :is(.map-layer-card,.map-basemap-control,.map-legend,.live-monitor-card,.buffer-legend) {
  border-radius:16px;
}

@media (prefers-reduced-transparency:reduce) {
  :is(html:not([data-theme]),html[data-theme="light"]) :is(.sidebar-filter-pane,.right-panel),
  :is(html:not([data-theme]),html[data-theme="light"]) .map-wrap :is(.map-layer-card,.map-basemap-control,.map-legend,.live-monitor-card,.buffer-legend,.map-search-control .search-box) {
    background:#fff !important;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}

/* Let the inspector navigation sit directly on the pane rather than inside a
   second tinted bar. The active underline and hairline retain orientation. */
:is(html:not([data-theme]),html[data-theme="light"]) .right-pane-tabs {
  background:transparent !important;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:none;
}
/* Dashboard style overrides end. */