/* ============================================================
   Lepton Solar — design tokens & primitives
   Neutral whitelabel, Linear/Mapbox-adjacent restraint.
   ============================================================ */

:root {
  /* surface */
  --bg: #fbfbfa;
  --bg-elev: #ffffff;
  --bg-sunken: #f4f4f2;
  --bg-inverse: #0d0d0c;

  /* ink */
  --ink-1: #0d0d0c;
  --ink-2: #2a2a28;
  --ink-3: #57574f;
  --ink-4: #8a8a82;
  --ink-5: #b5b5ad;
  --ink-6: #d8d8d2;
  --ink-7: #ececea; /* subtle dividers */

  /* lines */
  --line-strong: #d8d8d2;
  --line: #ececea;
  --line-soft: #f4f4f2;

  /* accent — solar amber, restrained */
  --accent: oklch(0.72 0.14 70);
  --accent-strong: oklch(0.62 0.16 60);
  --accent-soft: oklch(0.94 0.05 80);
  --accent-ink: #4a2e0c;

  /* data colors (sparingly) */
  --pos: oklch(0.62 0.12 150);
  --pos-soft: oklch(0.94 0.04 150);
  --neg: oklch(0.58 0.16 25);
  --neg-soft: oklch(0.95 0.04 25);
  --info: oklch(0.55 0.12 240);
  --info-soft: oklch(0.95 0.03 240);

  /* heatmap ramp (annual flux: low→high kWh/kW/yr) */
  --flux-0: #1a1147;
  --flux-1: #4a1d6e;
  --flux-2: #8a2876;
  --flux-3: #c63d68;
  --flux-4: #ee6d3d;
  --flux-5: #f7a722;
  --flux-6: #fde725;

  /* shade ramp (cool → warm) */
  --shade-0: #0c4a6e;
  --shade-1: #0e7490;
  --shade-2: #14b8a6;
  --shade-3: #facc15;
  --shade-4: #f97316;

  /* type */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* radii */
  --r-sm: 4px;
  --r: 6px;
  --r-md: 8px;
  --r-lg: 12px;
}

* { box-sizing: border-box; }

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink-1);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01", "ss03";
}

button { font-family: inherit; }

::selection { background: var(--accent-soft); color: var(--accent-ink); }

/* type primitives */
.t-num { font-family: var(--font-mono); font-feature-settings: "tnum", "zero"; letter-spacing: -0.01em; }
.t-mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; }
.t-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.t-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.t-display { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; font-family: var(--font-mono); font-feature-settings: "tnum"; }
.t-h1 { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.t-h2 { font-size: 14px; font-weight: 500; letter-spacing: -0.005em; }
.t-body { font-size: 13px; color: var(--ink-2); }
.t-small { font-size: 11.5px; color: var(--ink-3); }
.t-tiny { font-size: 10.5px; color: var(--ink-3); }

.ink-1 { color: var(--ink-1); }
.ink-2 { color: var(--ink-2); }
.ink-3 { color: var(--ink-3); }
.ink-4 { color: var(--ink-4); }

/* ============================================================
   Top bar
   ============================================================ */
.topbar {
  height: 48px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 14px 0 16px;
  position: relative;
  z-index: 20;
  white-space: nowrap;
}
.topbar > * { min-width: 0; }
.topbar-brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.topbar-brand-mark {
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--ink-1);
  display: grid; place-items: center;
  color: var(--accent);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
}
.topbar-brand-name { font-weight: 500; font-size: 13px; letter-spacing: -0.005em; }
.topbar-brand-sub { color: var(--ink-3); font-size: 12px; }
.topbar-divider { width: 1px; height: 16px; background: var(--line-strong); margin: 0 4px; }

.modetabs { display: flex; gap: 2px; background: var(--bg-sunken); padding: 3px; border-radius: 7px; }
.modetabs button {
  appearance: none; background: transparent; border: 0;
  font-size: 12px; padding: 5px 12px; border-radius: 4px;
  color: var(--ink-3); cursor: pointer; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.modetabs button.is-active { background: var(--bg-elev); color: var(--ink-1); box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px var(--line); }
.modetabs button:not(.is-active):hover { color: var(--ink-2); }
.modetabs .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.4; }
.modetabs button.is-active .dot { opacity: 1; color: var(--accent-strong); }

.topbar-right { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.topbar-right > * { white-space: nowrap; }
.topbar-right .pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-elev); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-3);
}
.topbar-right .pill .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pos); }

/* ============================================================
   Layout primitives
   ============================================================ */
.app-shell {
  height: 100%;
  display: grid;
  grid-template-rows: 48px 1fr;
}
.viewport { overflow: hidden; position: relative; }

.split {
  display: grid;
  grid-template-columns: 1fr 460px;
  height: 100%;
}
.split-map { position: relative; border-right: 1px solid var(--line); min-width: 0; }
.split-panel {
  background: var(--bg-elev);
  overflow-y: auto;
  border-left: 1px solid var(--line);
}
.split-panel::-webkit-scrollbar { width: 8px; }
.split-panel::-webkit-scrollbar-thumb { background: var(--ink-6); border-radius: 4px; }

/* address bar */
.addrbar {
  position: absolute; top: 12px; left: 268px; right: 252px;
  z-index: 1000;
  pointer-events: none;
}
.addrbar > * { pointer-events: auto; }
.addrbar > * { pointer-events: auto; }
.addrfield {
  background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 7px;
  padding: 7px 10px 7px 32px;
  font-size: 12.5px; color: var(--ink-1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  display: flex; align-items: center; gap: 8px; position: relative;
  white-space: nowrap; overflow: hidden; min-width: 0;
}
.addrfield > span:first-of-type { overflow: hidden; text-overflow: ellipsis; }
.addrfield .pin {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--ink-3);
}
.addrfield .meta {
  margin-left: auto;
  color: var(--ink-3); font-size: 10.5px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em;
  white-space: nowrap; flex-shrink: 0;
}
.addrchips { display: flex; gap: 6px; align-items: center; }
.addrchip {
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 10px; font-size: 11.5px; color: var(--ink-2); cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
  white-space: nowrap;
}
.addrchip:hover { border-color: var(--line-strong); }
.addrchip.is-active { background: var(--ink-1); color: white; border-color: var(--ink-1); }

/* ============================================================
   Layer panel (over map)
   ============================================================ */
.layerpanel {
  position: absolute; top: 12px; left: 12px; bottom: 12px;
  width: 244px; z-index: 1000;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.layerpanel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.layerpanel-body { padding: 6px 6px; overflow-y: auto; flex: 1; }
.layerpanel-section { padding: 8px 8px 4px; }
.layerpanel-section .t-label { padding: 0 4px 6px; }

.layerrow {
  display: grid; grid-template-columns: 16px 1fr auto;
  gap: 8px; align-items: center;
  padding: 6px 6px; border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.layerrow:hover { background: var(--bg-sunken); }
.layerrow .swatch {
  width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--line-strong);
  background: var(--bg);
}
.layerrow.is-active .swatch::after {
  content: ""; display: block; width: 100%; height: 100%; border-radius: 2px;
  background: var(--accent-strong); transform: scale(0.5);
}
.layerrow .lbl { color: var(--ink-2); }
.layerrow.is-active .lbl { color: var(--ink-1); font-weight: 500; }
.layerrow .swatch-rgb { background: linear-gradient(135deg, #5b6c5d, #b4a78b); }
.layerrow .swatch-flux { background: linear-gradient(90deg, #1a1147, #c63d68, #fde725); }
.layerrow .swatch-monthly { background: linear-gradient(90deg, #1a1147, #ee6d3d, #fde725); }
.layerrow .swatch-shade { background: linear-gradient(90deg, #0c4a6e, #facc15, #f97316); }
.layerrow .swatch-dsm { background: linear-gradient(90deg, #0d3b66, #faf0ca, #f95738); }
.layerrow .swatch-segments { background: repeating-linear-gradient(45deg, var(--accent) 0 2px, transparent 2px 4px); }
.layerrow .swatch-panels { background: #0d2c54; }
.layerrow .swatch-mask { background: repeating-linear-gradient(0deg, var(--ink-4) 0 1px, transparent 1px 3px); }
.layerrow .kbd {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.05em;
  background: var(--bg-sunken); color: var(--ink-3);
  padding: 1px 5px; border-radius: 3px; border: 1px solid var(--line);
}

.imagery-badge {
  margin: 6px 8px 8px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg-sunken);
  display: grid; grid-template-columns: 1fr auto; gap: 4px 8px;
  font-size: 11px;
  white-space: nowrap;
}
.imagery-badge .row { display: contents; }
.imagery-badge .k { color: var(--ink-3); white-space: nowrap; }
.imagery-badge .v { color: var(--ink-1); font-family: var(--font-mono); white-space: nowrap; }
.imagery-badge .v.warn { color: var(--accent-strong); }

/* month scrubber */
.monthscrub {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  z-index: 1000;
  background: var(--bg-elev); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 8px 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  display: flex; align-items: center; gap: 12px;
}
.monthscrub-ticks { display: flex; gap: 2px; align-items: flex-end; }
.monthscrub-ticks button {
  appearance: none; border: 0; background: transparent;
  width: 24px; padding: 4px 0 2px; cursor: pointer;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-3); border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.monthscrub-ticks button .bar {
  width: 4px; border-radius: 2px;
  background: var(--ink-5);
}
.monthscrub-ticks button.is-active { color: var(--ink-1); background: var(--bg-sunken); }
.monthscrub-ticks button.is-active .bar { background: var(--accent-strong); }
.monthscrub .play {
  width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid var(--line-strong); background: var(--bg-elev);
  display: grid; place-items: center; cursor: pointer;
}
.monthscrub .play:hover { background: var(--bg-sunken); }
.monthscrub .label { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }

/* ============================================================
   Side panel (homeowner right column)
   ============================================================ */
.sp-section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.sp-section.tight { padding: 10px 16px; }
.sp-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}
.sp-section-head > * { white-space: nowrap; min-width: 0; }
.sp-section-head .t-label { color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
}
.sp-cell {
  background: var(--bg-elev);
  padding: 10px 12px;
}
.sp-cell .k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.sp-cell .v { font-family: var(--font-mono); font-size: 18px; letter-spacing: -0.02em; color: var(--ink-1); }
.sp-cell .u { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); margin-left: 3px; }
.sp-cell .delta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-top: 3px; }
.sp-cell .delta.pos { color: var(--pos); }

/* segment table */
.segtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: var(--font-mono);
}
.segtable th {
  text-align: left; font-weight: 500;
  color: var(--ink-3); font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px 6px; border-bottom: 1px solid var(--line);
}
.segtable td {
  padding: 7px 8px; border-bottom: 1px solid var(--line-soft);
  color: var(--ink-2); font-family: var(--font-mono); font-size: 11.5px;
  white-space: nowrap;
}
.segtable td.lead { color: var(--ink-1); display: flex; align-items: center; gap: 8px; }
.segtable td .seg-dot { width: 8px; height: 8px; border-radius: 2px; }
.segtable .arrow {
  display: inline-block; width: 14px; height: 14px;
}
.segtable tr.is-hover td { background: var(--bg-sunken); cursor: pointer; }

/* sliders + controls */
.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field:last-child { margin-bottom: 0; }
.field-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; white-space: nowrap; }
.field-row .lab { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.field-row .val { font-family: var(--font-mono); font-size: 12px; color: var(--ink-1); white-space: nowrap; }

input[type="range"].slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 2px;
  background: var(--ink-6); outline: none; margin: 0;
}
input[type="range"].slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg-elev); border: 1.5px solid var(--ink-1);
  cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
input[type="range"].slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg-elev); border: 1.5px solid var(--ink-1); cursor: pointer;
}

.numinput {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--bg-elev); color: var(--ink-1);
  font-family: var(--font-mono); font-size: 12px;
}
.numinput:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

select.select {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--bg-elev) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' fill='none' stroke='%2357574f' stroke-width='1.2'/></svg>") no-repeat right 10px center;
  appearance: none; -webkit-appearance: none;
  color: var(--ink-1); font-size: 12.5px;
  padding-right: 28px;
}
select.select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

.toggle {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
}
.toggle-switch {
  width: 28px; height: 16px; border-radius: 999px;
  background: var(--ink-6); position: relative; transition: background 0.15s;
}
.toggle-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%; background: white;
  transition: transform 0.15s;
}
.toggle.is-on .toggle-switch { background: var(--ink-1); }
.toggle.is-on .toggle-switch::after { transform: translateX(12px); }
.toggle .lab { font-size: 12px; color: var(--ink-2); }

/* segmented buttons */
.seg {
  display: inline-flex; padding: 2px; gap: 1px;
  background: var(--bg-sunken); border-radius: 6px;
  border: 1px solid var(--line);
}
.seg button {
  appearance: none; border: 0; background: transparent;
  font-size: 11.5px; padding: 4px 9px; border-radius: 4px;
  color: var(--ink-3); cursor: pointer; font-family: var(--font-sans);
}
.seg button.is-active { background: var(--bg-elev); color: var(--ink-1); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }

/* financials */
.fin-headline {
  background: var(--ink-1); color: white;
  border-radius: 8px; padding: 14px 16px;
  display: grid; grid-template-columns: 1fr auto; gap: 6px 16px;
  margin-bottom: 12px;
  position: relative; overflow: hidden;
}
.fin-headline::after {
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(247,167,34,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.fin-headline .k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.fin-headline .v { font-family: var(--font-mono); font-size: 26px; letter-spacing: -0.02em; color: white; }
.fin-headline .v .u { font-size: 12px; color: rgba(255,255,255,0.55); margin-left: 4px; }
.fin-headline .right { text-align: right; }

.fin-list {
  display: grid; grid-template-columns: 1fr auto;
  font-family: var(--font-mono); font-size: 12px;
}
.fin-list > div {
  padding: 7px 0; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 6px;
}
.fin-list > div.r { justify-content: flex-end; color: var(--ink-1); }
.fin-list > div.l { color: var(--ink-3); font-size: 11.5px; }
.fin-list > div.l .asterisk { color: var(--accent-strong); }
.fin-list > .total-l, .fin-list > .total-r {
  font-weight: 500; color: var(--ink-1); font-size: 13px;
  border-bottom: 0; padding-top: 10px;
}

/* PM Surya Ghar block */
.subsidy-bar {
  height: 8px; border-radius: 4px; overflow: hidden;
  display: flex; background: var(--ink-7); margin: 4px 0 10px;
}
.subsidy-bar .seg-sub { background: var(--accent); }
.subsidy-bar .seg-self { background: var(--ink-2); }
.subsidy-legend {
  display: flex; gap: 14px; font-size: 11px; color: var(--ink-3);
  font-family: var(--font-mono);
}
.subsidy-legend .dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 6px; vertical-align: middle; }

/* tweaks group accordion */
.tweak-group {
  border: 1px solid var(--line); border-radius: 7px;
  overflow: hidden; margin-bottom: 8px;
  background: var(--bg-elev);
}
.tweak-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; cursor: pointer;
  background: var(--bg-elev);
}
.tweak-head:hover { background: var(--bg-sunken); }
.tweak-head .ti { font-size: 12px; color: var(--ink-1); font-weight: 500; display: flex; gap: 8px; align-items: center; }
.tweak-head .tag {
  font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3);
  padding: 2px 6px; border-radius: 3px; background: var(--bg-sunken); border: 1px solid var(--line);
  white-space: nowrap;
}
.tweak-head .ti { white-space: nowrap; }
.tweak-head { gap: 8px; }
.tweak-head .tag.on { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-soft); }
.tweak-body { padding: 10px 12px 12px; border-top: 1px solid var(--line); }

/* ============================================================
   Enterprise dashboard
   ============================================================ */
.enterprise {
  display: grid;
  grid-template-rows: auto auto 1fr;
  height: 100%;
}
.scenarios {
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
  padding: 12px 16px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
}
.scenarios .scenarios-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.scenario-card {
  border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer; background: var(--bg-elev);
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
}
.scenario-card:hover { border-color: var(--line-strong); }
.scenario-card.is-active { border-color: var(--ink-1); background: var(--bg-sunken); }
.scenario-card .icon {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--bg-sunken); border: 1px solid var(--line); display: grid; place-items: center;
  color: var(--ink-2);
}
.scenario-card .ti { font-size: 12.5px; font-weight: 500; color: var(--ink-1); }
.scenario-card .ss { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.scenario-card .ct { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
}
.kpi {
  padding: 12px 18px;
  border-right: 1px solid var(--line);
  display: grid; gap: 4px;
  position: relative;
}
.kpi:last-child { border-right: 0; }
.kpi .k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.kpi .v { font-family: var(--font-mono); font-size: 22px; letter-spacing: -0.02em; color: var(--ink-1); }
.kpi .v .u { font-size: 11px; color: var(--ink-3); margin-left: 3px; font-weight: 400; }
.kpi .d { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.kpi .d .pos { color: var(--pos); }
.kpi .micro { height: 22px; margin-top: 4px; }

.entgrid {
  display: grid;
  grid-template-columns: 1fr 520px;
  height: 100%;
  min-height: 0;
}
.entgrid-map { position: relative; border-right: 1px solid var(--line); min-height: 0; }
.entgrid-right {
  background: var(--bg-elev); overflow-y: auto; display: grid; grid-template-rows: auto 1fr auto;
  min-height: 0;
}

/* ranked table */
.ranked-table-wrap {
  overflow: auto; border-bottom: 1px solid var(--line);
}
.ranked-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-mono); font-size: 11.5px;
}
.ranked-table thead th {
  position: sticky; top: 0;
  background: var(--bg-elev);
  text-align: left;
  font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500;
  padding: 8px 12px; border-bottom: 1px solid var(--line); z-index: 1;
  white-space: nowrap;
}
.ranked-table thead th.num { text-align: right; }
.ranked-table tbody td {
  padding: 6px 12px; border-bottom: 1px solid var(--line-soft);
  color: var(--ink-2); white-space: nowrap;
}
.ranked-table tbody td.num { text-align: right; color: var(--ink-1); }
.ranked-table tbody tr { cursor: pointer; }
.ranked-table tbody tr:hover td { background: var(--bg-sunken); }
.ranked-table tbody tr.is-selected td { background: var(--accent-soft); }
.ranked-table .bar {
  display: inline-block; height: 6px; border-radius: 2px;
  background: var(--accent); vertical-align: middle;
  margin-right: 6px;
}
.ranked-table .sublabel { color: var(--ink-3); margin-left: 6px; }
.ranked-table .b-id { color: var(--ink-1); font-weight: 500; }
.ranked-table .ok { color: var(--pos); }
.ranked-table .warn { color: var(--accent-strong); }

/* charts row */
.charts-row {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
}
.chart-card {
  padding: 12px 14px;
  border-right: 1px solid var(--line);
}
.chart-card:last-child { border-right: 0; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; gap: 12px; white-space: nowrap; }
.chart-head > * { white-space: nowrap; min-width: 0; }

/* Map overlays — markers */
.bldg-marker {
  width: 14px; height: 14px;
  border: 1.5px solid white;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  border-radius: 3px;
  cursor: pointer;
  transition: transform 0.1s;
}
.bldg-marker:hover, .bldg-marker.is-selected { transform: scale(1.4); z-index: 999; }
.bldg-marker.is-selected { outline: 2px solid white; }

/* leaflet overrides */
.leaflet-container { background: #1c1f24; font-family: var(--font-sans); }
.leaflet-control-attribution {
  background: rgba(255,255,255,0.85) !important; font-size: 9.5px !important;
  padding: 1px 6px !important;
}
.leaflet-popup-content-wrapper { border-radius: 7px; }
.leaflet-popup-content { margin: 10px 12px; font-size: 12px; }

/* tooltip */
.tooltip-card {
  background: var(--bg-elev); border: 1px solid var(--line-strong);
  border-radius: 7px; padding: 10px 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  font-size: 12px;
  min-width: 200px;
}
.tooltip-card .h { font-size: 12px; font-weight: 500; color: var(--ink-1); margin-bottom: 4px; }
.tooltip-card .r { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); padding: 1px 0; }
.tooltip-card .r .v { color: var(--ink-1); }

/* legend on map */
.maplegend {
  position: absolute; right: 12px; top: 12px; z-index: 1000;
  background: var(--bg-elev); border: 1px solid var(--line-strong);
  border-radius: 7px; padding: 10px 12px;
  font-size: 11px; min-width: 180px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.maplegend .head {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
}
.maplegend .ramp {
  height: 8px; border-radius: 2px; margin: 4px 0;
  background: linear-gradient(90deg, var(--flux-0), var(--flux-2), var(--flux-4), var(--flux-6));
}
.maplegend .axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.maplegend .row-list { display: grid; gap: 4px; }
.maplegend .row-list .row { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.maplegend .row-list .row .sw { width: 10px; height: 10px; border-radius: 2px; }

/* compass / scale corner */
.mapcorner {
  position: absolute; right: 12px; bottom: 28px; z-index: 1000;
  display: flex; gap: 6px; flex-direction: column; align-items: flex-end;
}
.mapcorner .item {
  background: var(--bg-elev); border: 1px solid var(--line-strong);
  border-radius: 6px; padding: 4px 8px;
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-3);
  white-space: nowrap;
}

/* utility */
.row-flex { display: flex; align-items: center; gap: 8px; }
.spacer { flex: 1; }
.hr { height: 1px; background: var(--line); margin: 12px 0; }
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.muted { color: var(--ink-3); }
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em;
  background: var(--bg-sunken); border: 1px solid var(--line);
  color: var(--ink-3); text-transform: uppercase;
}
.tag.accent { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-ink); }
.tag.pos { background: var(--pos-soft); border-color: var(--pos-soft); color: var(--pos); }
.tag.warn { color: var(--accent-strong); border-color: var(--accent-soft); background: var(--accent-soft); }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--bg-elev); color: var(--ink-1);
  font-size: 12px; cursor: pointer;
}
.btn:hover { background: var(--bg-sunken); }
.btn.primary { background: var(--ink-1); color: white; border-color: var(--ink-1); }
.btn.primary:hover { background: #1f1f1d; }

/* footer status */
.statusbar {
  display: flex; align-items: center; gap: 18px;
  padding: 6px 16px;
  border-top: 1px solid var(--line); background: var(--bg-elev);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3);
  letter-spacing: 0.02em;
  white-space: nowrap; overflow-x: auto;
}
.statusbar .grp { display: flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; }
.statusbar .dot.pos { background: var(--pos); }
.statusbar .dot.warn { background: var(--accent-strong); }

@keyframes lpspin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* hover panel building popup over enterprise map */
.bldg-popup {
  background: var(--bg-elev); border: 1px solid var(--line-strong);
  border-radius: 7px; padding: 10px 12px; min-width: 220px;
  font-family: var(--font-sans); font-size: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
}
.bldg-popup .h { font-size: 12.5px; font-weight: 500; color: var(--ink-1); margin-bottom: 6px; }
.bldg-popup .row { display: flex; justify-content: space-between; padding: 2px 0; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; gap: 12px; }
.bldg-popup .row .v { color: var(--ink-1); white-space: nowrap; }
.bldg-popup .open { margin-top: 8px; }