/* SAJID KOTHI dashboard — palette + Solax-style floating tag layout */
:root {
  --bg: #fafaf7;
  --bg-alt: #f2efe8;
  --bg-deep: #efece4;
  --bg-glow: radial-gradient(circle at 50% 30%, #f8f4e8 0%, #fafaf7 60%);
  --bg-dark: #1a1715;
  --ink: #1a1715;
  --ink-soft: #4a4540;
  --ink-mute: #857f77;
  --rule: #e4ddd1;
  --tag-bg: rgba(255, 255, 255, 0.92);
  --tag-border: rgba(184, 134, 11, 0.18);
  --tag-shadow: 0 6px 24px rgba(26, 23, 21, 0.08), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  --accent: #b8860b;
  --accent-soft: #d4a83a;
  --accent-dark: #8b6508;
  --good: #2f7d3b;
  --good-glow: rgba(47, 125, 59, 0.25);
  --warn: #b8860b;
  --bad: #b3261e;
  --line-glow: #4cd4b0;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --max: 1200px;
}

[data-theme='dark'] {
  --bg: #0f0d0c;
  --bg-alt: #181513;
  --bg-deep: #14110f;
  --bg-glow: radial-gradient(circle at 50% 25%, rgba(184, 134, 11, 0.08) 0%, #0f0d0c 65%);
  --ink: #ece5d6;
  --ink-soft: #b8b0a2;
  --ink-mute: #7a736a;
  --rule: #2a2622;
  --tag-bg: rgba(28, 24, 21, 0.78);
  --tag-border: rgba(184, 134, 11, 0.28);
  --tag-shadow: 0 8px 30px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --accent: #d9a93b;
  --accent-soft: #e6bf5a;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .35s ease, color .35s ease;
}
body { min-height: 100vh; min-height: 100dvh; background: var(--bg-glow); }

a { color: inherit; }

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 12px;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
h1 em, h2 em, .num em { color: var(--accent); font-style: italic; font-weight: 500; }

button { font-family: var(--sans); }

/* ---------- login ---------- */
body.login { display: grid; place-items: center; padding: 24px; }
body.login main {
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; gap: 28px;
  padding: 36px 28px;
  background: var(--bg-alt);
  border: 1px solid var(--rule);
}
body.login h1 { font-size: 38px; line-height: 1.05; }
body.login form { display: flex; flex-direction: column; gap: 14px; }
body.login label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-soft); }
body.login input {
  font-family: var(--sans); font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink);
  outline: none; transition: border-color .15s ease;
}
body.login input:focus { border-color: var(--accent); }
body.login button {
  font-family: var(--sans); font-size: 14px; letter-spacing: 0.04em;
  padding: 13px 18px;
  background: var(--bg-dark); color: var(--bg);
  border: 0; cursor: pointer;
  transition: opacity .15s ease, transform .15s ease;
}
body.login button:hover { opacity: 0.9; }
body.login button:active { transform: translateY(1px); }
body.login .err { color: var(--bad); font-size: 13px; margin: 0; }
body.login footer p {
  font-size: 12px; color: var(--ink-mute); text-align: center; margin: 0; letter-spacing: 0.02em;
}

/* ---------- shell ---------- */
.shell { max-width: var(--max); margin: 0 auto; padding: 22px 20px 96px; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 24px;
  gap: 16px;
}
.brand { display: flex; flex-direction: column; gap: 2px; }
.brand .eyebrow { margin: 0; }
.brand .name { font-family: var(--serif); font-size: 22px; line-height: 1; }
.brand .name em { color: var(--accent); font-style: italic; }

.topbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

.live-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--tag-bg);
  backdrop-filter: blur(6px);
}
.live-pill .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--good); display: inline-block;
  box-shadow: 0 0 0 0 var(--good-glow);
  animation: pulse-dot 2s ease-out infinite;
}
.live-pill.demo .dot { background: var(--warn); animation: none; }
.live-pill.bad .dot { background: var(--bad); animation: pulse-dot 1.4s ease-out infinite; }
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 var(--good-glow); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.icon-btn, .text-btn {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em;
  background: transparent; color: var(--ink); border: 1px solid var(--rule);
  padding: 7px 12px; cursor: pointer;
  transition: all .15s ease;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 0;
}
.icon-btn:hover, .text-btn:hover { border-color: var(--ink); }
.icon-btn[disabled], .text-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.icon-btn svg { width: 14px; height: 14px; }

.updated { font-size: 11px; color: var(--ink-mute); letter-spacing: 0.04em; }

/* ---------- hero (factory + tags) ---------- */
.hero {
  position: relative;
  padding: 18px 0 28px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.hero-status {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
  gap: 12px; flex-wrap: wrap;
}
.hero-status .place {
  font-size: 13px; color: var(--ink-soft);
}
.hero-status .place strong { color: var(--ink); font-weight: 500; letter-spacing: 0.02em; }
.hero-status .weather { font-size: 12px; color: var(--ink-mute); }

.hero-power {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.hero-power .figure {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(56px, 11vw, 116px);
  line-height: 0.9;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.hero-power .unit {
  font-family: var(--sans);
  font-size: clamp(16px, 2.4vw, 22px);
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.hero-power .meta {
  font-size: 13px; color: var(--ink-mute); letter-spacing: 0.04em;
  margin-left: auto;
}

.factory {
  position: relative;
  width: 100%;
  height: 580px;
  margin-top: 8px;
  overflow: visible;
}
/* The "stage" matches the actual rendered image dimensions so tags can
   anchor to building parts using percent coordinates. The image is 339x735
   (aspect ~0.46), height-constrained — width follows. */
.stage {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  aspect-ratio: 339 / 735;
}
.stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 50px rgba(26, 23, 21, 0.16));
  transition: filter .35s ease;
}
[data-theme='dark'] .stage img {
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55)) brightness(0.94);
}
@media (max-width: 720px) {
  .factory { height: 460px; }
}
[data-theme='dark'] .factory-img img {
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.5)) brightness(0.92);
}

.factory-placeholder {
  position: absolute; inset: 12% 8%;
  display: grid; place-items: center; text-align: center;
  border: 1.5px dashed var(--rule);
  background: var(--bg-alt);
  padding: 24px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-mute);
  font-size: 17px;
  line-height: 1.5;
}
.factory-placeholder code {
  font-family: var(--mono); font-size: 12px; font-style: normal;
  background: var(--bg); color: var(--ink); padding: 2px 6px;
  display: inline-block; margin-top: 8px;
  border: 1px solid var(--rule);
}

/* animated energy flow lines (sit BELOW tags but ABOVE image) */
.flow-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.flow-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 3 4;
  filter: url(#flow-glow);
  opacity: 0.32;
  transition: opacity .5s ease, stroke .3s ease;
  animation: flow-march var(--flow-speed, 2.4s) linear infinite;
}
.flow-line.active { opacity: 1; }
.flow-line.reverse { animation-direction: reverse; }
.flow-line.feed { stroke: var(--good); }
[data-theme='dark'] .flow-line { stroke: var(--accent-soft); }
[data-theme='dark'] .flow-line.feed { stroke: #6fd388; }
@keyframes flow-march {
  to { stroke-dashoffset: -64; }
}

/* Anchor dots fixed on building features. Static core + pulsing outer ring. */
.anchor {
  fill: var(--accent);
  vector-effect: non-scaling-stroke;
  stroke: var(--bg);
  stroke-width: 0.4;
  filter: drop-shadow(0 0 2px var(--accent));
  opacity: 0.95;
}
.anchor-pulse {
  fill: none;
  stroke: var(--accent);
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
  opacity: 0.6;
  transform-origin: center;
  transform-box: fill-box;
  animation: anchor-ping 2.6s ease-out infinite;
}
@keyframes anchor-ping {
  0%   { transform: scale(1);   opacity: 0.6; stroke-width: 0.6; }
  80%  { transform: scale(4.5); opacity: 0;   stroke-width: 0.2; }
  100% { transform: scale(4.5); opacity: 0;   stroke-width: 0.2; }
}

/* Particles glow gold (or green if feeding to grid). */
.particle {
  fill: var(--accent);
  filter: drop-shadow(0 0 2px var(--accent));
  opacity: 0;
  transition: opacity .5s ease;
}
.particle.active { opacity: 1; }
.particle.feed { fill: var(--good); filter: drop-shadow(0 0 2px var(--good)); }

/* floating data tags */
.tag {
  position: absolute;
  background: var(--tag-bg);
  border: 1px solid var(--tag-border);
  border-radius: 14px;
  padding: 9px 13px;
  display: flex; flex-direction: column; gap: 1px;
  box-shadow: var(--tag-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  min-width: 92px;
  z-index: 2;
  animation: tag-float 0.7s cubic-bezier(.2, .7, .2, 1) both;
  transition: transform .25s ease, border-color .25s ease;
}
.tag:hover { transform: translateY(-2px); border-color: var(--accent); }
.tag .tag-label {
  font-family: var(--sans);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 500;
}
.tag .tag-value {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  color: var(--accent);
  font-size: 22px; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.tag .tag-unit {
  font-family: var(--sans); font-size: 11px;
  color: var(--ink-soft); margin-left: 2px;
  font-style: normal; font-weight: 400;
}
.tag .tag-foot {
  font-family: var(--mono); font-size: 9.5px;
  color: var(--ink-mute); letter-spacing: 0.02em;
  margin-top: 2px;
}
.tag {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 9px;
}
.tag-status { flex-direction: row !important; gap: 6px; align-items: center; }
.tag-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tag-icon {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(184,134,11,0.10), rgba(184,134,11,0.04));
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}
.tag-icon svg { width: 16px; height: 16px; }
[data-theme='dark'] .tag-icon { background: linear-gradient(135deg, rgba(217,169,59,0.18), rgba(217,169,59,0.05)); }

/* Particles riding the flow lines */
.particle { opacity: 0; transition: opacity .5s ease; filter: drop-shadow(0 0 1.5px var(--accent)); }
.particle.active { opacity: 1; }
.p-grid.feed { fill: var(--good) !important; filter: drop-shadow(0 0 1.5px var(--good)); }

/* Sky overlay (sun + clouds) above the building */
.sky {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.sun {
  position: absolute;
  width: 42px; height: 42px;
  color: var(--accent);
  transition: top 30s linear, left 30s linear, opacity 1.2s ease, filter 0.6s ease;
  z-index: 0;
}
.sun svg { width: 100%; height: 100%; animation: sun-spin 60s linear infinite; }
.sun.cloudy { filter: drop-shadow(0 0 6px rgba(184,134,11,0.25)) brightness(0.8); opacity: 0.6; }
.sun:not(.cloudy) { filter: drop-shadow(0 0 14px rgba(184,134,11,0.55)) drop-shadow(0 0 28px rgba(184,134,11,0.25)); }
[data-theme='dark'] .sun { color: var(--accent-soft); }
[data-theme='dark'] .sun:not(.cloudy) { filter: drop-shadow(0 0 16px rgba(217,169,59,0.6)); }
@keyframes sun-spin { to { transform: rotate(360deg); } }
.sun.below-horizon { opacity: 0; }

/* Clouds drift across the sky. Visibility set by JS based on cloud cover %. */
.cloud {
  position: absolute;
  width: 90px; height: 45px;
  color: rgba(120, 120, 120, 0.32);
  opacity: 0;
  transition: opacity 1.5s ease;
  filter: blur(0.4px);
}
[data-theme='dark'] .cloud { color: rgba(180, 180, 180, 0.18); }
.cloud svg { width: 100%; height: 100%; }
.cloud.visible { opacity: 1; }
.cloud-1 { top: 8%;  width: 110px; animation: drift1 70s linear infinite; }
.cloud-2 { top: 22%; width: 80px;  animation: drift2 95s linear infinite; }
.cloud-3 { top: 14%; width: 130px; animation: drift3 120s linear infinite; }
@keyframes drift1 { 0% { left: -30%; } 100% { left: 130%; } }
@keyframes drift2 { 0% { left: 110%; } 100% { left: -30%; } }
@keyframes drift3 { 0% { left: -40%; } 100% { left: 140%; } }

/* ---------- Insight panel ---------- */
.insight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.insight {
  padding: 18px 18px 16px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 4px;
  position: relative; overflow: hidden;
  transition: border-color .25s ease, transform .25s ease;
}
.insight:hover { border-color: var(--accent); transform: translateY(-1px); }
.insight-icon {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  color: var(--accent);
  margin-bottom: 6px;
}
.insight-icon svg { width: 22px; height: 22px; }
.insight-figure {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 30px; line-height: 1.05; color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 4px;
}
.insight-figure .insight-pct { font-size: 16px; color: var(--ink-soft); font-style: normal; font-family: var(--sans); margin-left: 0; }
.insight-unit { font-size: 12px; color: var(--ink-soft); letter-spacing: 0.02em; }
.insight-foot {
  font-family: var(--mono); font-size: 10px; color: var(--ink-mute);
  margin-top: auto; padding-top: 6px;
}
@media (max-width: 720px) {
  .insight-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .insight { padding: 14px; }
  .insight-figure { font-size: 24px; }
}

/* ---------- Sun panel ---------- */
.sun-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.sun-cell {
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.sun-cell.solar-noon { border-color: var(--accent); background: linear-gradient(135deg, rgba(184,134,11,0.06), var(--bg)); }
.sun-icon { font-size: 16px; color: var(--accent); line-height: 1; }
.sun-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.sun-value { font-family: var(--mono); font-size: 14px; color: var(--ink); }
.horizon-wrap {
  margin-top: 8px;
  height: 80px;
  background: linear-gradient(180deg, transparent 0%, transparent 75%, var(--bg-alt) 75%, var(--bg-alt) 100%);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 4px;
}
.horizon { width: 100%; height: 80%; }
.horizon-foot { font-family: var(--mono); font-size: 10px; color: var(--ink-mute); padding: 4px 6px 0; }
#sun-marker { transition: cx .8s ease, cy .8s ease, opacity .5s ease; filter: drop-shadow(0 0 4px var(--accent)); }
.weather-cell { background: linear-gradient(135deg, rgba(184,134,11,0.05), var(--bg)); }
.weather-icon { font-size: 22px; line-height: 1; }
@media (max-width: 720px) {
  .sun-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Panel-head row (used by chart panels with optional controls) */
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-head h2 { margin: 0; }
.panel-head .panel-sub { margin: 0; }

/* Updated demo banner code link visibility */
.demo-banner code {
  font-family: var(--mono); font-size: 11px; padding: 1px 6px;
  background: var(--bg); border: 1px solid var(--tag-border);
}

/* Count-up emphasis when a value just changed */
.figure.bump, .tag-value.bump { animation: bump .6s ease-out; }
@keyframes bump {
  0%   { transform: none; }
  40%  { transform: translateY(-2px); color: var(--accent); }
  100% { transform: none; }
}
.tag.tag-status {
  flex-direction: row; align-items: center; gap: 6px;
  padding: 6px 12px;
}
.tag.tag-status .tag-value { font-size: 13px; color: var(--ink); font-style: normal; font-family: var(--sans); font-weight: 500; }

@keyframes tag-float {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* Tag positions match the SVG flow line endpoints exactly. Each tag sits
   just outside the image bounds and is aligned with the building feature
   it points to (so the line travels the shortest visible distance).
     • status:   top-left, no anchor (just a status pill)
     • solar:    top-right area (line down-left to roof panels at 52,28)
     • grid:     mid-left, top (line right to utility pole at 12,16)
     • inverter: mid-left, bottom (line right to wall inverter at 28,60)
     • load:     mid-right, bottom (line left to garage/car at 72,78) */
.tag-status   { top: -4%;  left: -160px; }
.tag-solar    { top: -4%;  right: -160px; animation-delay: 0.05s; }
.tag-grid     { top: 10%;  left: -180px; animation-delay: 0.10s; }
.tag-inverter { top: 54%;  left: -180px; animation-delay: 0.15s; }
.tag-load     { top: 74%;  right: -180px; animation-delay: 0.20s; }

/* ---------- device strip ---------- */
.device-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin-top: 16px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  background: var(--rule);
}
.device-strip > div {
  padding: 12px 14px;
  background: var(--bg-alt);
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
.device-strip .ds-label {
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 500;
}
.device-strip .ds-value {
  font-family: var(--mono); font-size: 12px;
  color: var(--ink); letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 720px) {
  .device-strip { grid-template-columns: repeat(2, 1fr); }
  .device-strip > div:nth-child(5) { grid-column: span 2; }
}

/* ---------- cards ---------- */
.cards {
  display: grid; gap: 14px;
  grid-template-columns: repeat(6, 1fr);
  margin-bottom: 24px;
}
@media (max-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card .figure.tiny { font-size: 22px; line-height: 1.15; }
.card.peak .figure { color: var(--good); }
.card {
  padding: 22px 20px;
  border: 1px solid var(--rule);
  background: var(--bg-alt);
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .25s ease, border-color .25s ease;
  position: relative; overflow: hidden;
  border-radius: 14px;
}
.card:hover { border-color: var(--accent); transform: translateY(-1px); }
.card .label {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute);
}
.card .figure {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 38px; line-height: 1; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.card .unit { font-size: 12px; color: var(--ink-soft); }
.card .delta {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin-top: 8px;
  display: block;
  font-variant-numeric: tabular-nums;
}
.card .delta:empty { display: none; }

/* ---------- panels ---------- */
.panel {
  padding: 26px 24px;
  border: 1px solid var(--rule);
  background: var(--bg-alt);
  margin-bottom: 20px;
  border-radius: 14px;
}
.panel h2 { font-size: 26px; margin: 0 0 4px; }
.panel .panel-sub {
  font-size: 12px; color: var(--ink-mute); letter-spacing: 0.04em; margin: 0 0 20px;
}

/* ---------- chart ---------- */
.chart-wrap { position: relative; height: 320px; }
@media (max-width: 720px) { .chart-wrap { height: 260px; } }

/* ---------- Tabs above the stats chart ---------- */
.stats-tabs {
  display: inline-flex;
  gap: 0;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 3px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.stats-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 7px 16px;
  border-radius: 100px;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  font-weight: 500;
  transition: color .2s ease, background .25s ease;
}
.stats-tab:hover { color: var(--ink); }
.stats-tab.is-active {
  background: var(--ink);
  color: var(--paper);
}
.stats-footnote {
  margin: 14px 0 0;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  font-style: italic;
  text-align: right;
}
.stats-footnote:empty { display: none; }
@media (max-width: 720px) {
  .stats-tab { padding: 6px 11px; font-size: 10px; letter-spacing: 0.06em; }
}

/* ---------- Pulse strip (smart status row) ---------- */
.pulse-strip {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1fr 1.2fr;
  gap: 1px;
  margin: 18px 0 22px;
  padding: 0;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}
.pulse-cell {
  background: var(--paper);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.pulse-label {
  font: 600 10px/1.2 var(--sans);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute);
}
.pulse-value {
  font: 500 22px/1 var(--serif); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pulse-foot {
  font: 400 11px/1.3 var(--mono); color: var(--ink-mute);
  letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pulse-unit {
  font: 400 12px/1 var(--mono); color: var(--ink-mute); margin-left: 2px;
}
.pulse-strip.is-generating .pulse-status .pulse-value { color: var(--good); }
.pulse-strip.is-generating .pulse-status .pulse-value::before {
  content: ''; display: inline-block;
  width: 8px; height: 8px; border-radius: 50%; background: var(--good);
  margin-right: 8px; vertical-align: 1px;
  box-shadow: 0 0 0 0 var(--good-glow);
  animation: pulse-dot 2.2s infinite;
}
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(47, 125, 59, 0.45); }
  70%  { box-shadow: 0 0 0 12px rgba(47, 125, 59, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 125, 59, 0); }
}
.pulse-strip.is-fault .pulse-status .pulse-value { color: var(--bad); }
.pulse-strip.is-sleeping .pulse-status .pulse-value { color: var(--accent); }
@media (max-width: 1024px) {
  .pulse-strip { grid-template-columns: repeat(2, 1fr); }
  .pulse-strip .pulse-cell:last-child { grid-column: span 2; }
}
@media (max-width: 480px) {
  .pulse-strip { grid-template-columns: 1fr; }
  .pulse-strip .pulse-cell:last-child { grid-column: auto; }
  .pulse-value { font-size: 18px; }
}

/* ---------- 7-day forecast ---------- */
.forecast-total {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.forecast-total-label {
  font: 600 10px/1 var(--sans); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-mute);
}
.forecast-total-value {
  font: 500 28px/1 var(--serif); color: var(--accent);
}
.forecast-total-unit { font: 400 11px/1 var(--mono); color: var(--ink-mute); }

.forecast-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
@media (max-width: 1100px) {
  .forecast-grid {
    grid-template-columns: repeat(7, minmax(120px, 1fr));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .forecast-card { scroll-snap-align: start; }
}
.forecast-card {
  padding: 12px 10px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--bg);
  display: flex; flex-direction: column; gap: 4px;
  text-align: center;
  transition: border-color .2s, transform .2s;
}
.forecast-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.forecast-card.is-today {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(184,134,11,0.10), var(--bg));
}
.fc-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 600 10px/1 var(--sans); letter-spacing: 0.06em;
}
.fc-day { color: var(--ink); text-transform: uppercase; }
.fc-date { color: var(--ink-mute); font-family: var(--mono); font-weight: 400; }
.fc-icon { font-size: 26px; line-height: 1; margin: 4px 0 2px; }
.fc-cond {
  font: 400 11px/1.3 var(--sans); color: var(--ink-soft);
  min-height: 28px;
}
.fc-est {
  font: 500 22px/1 var(--serif); color: var(--ink);
  display: flex; align-items: baseline; justify-content: center; gap: 4px;
}
.fc-est-val { color: var(--accent); }
.fc-est-unit { font: 400 11px/1 var(--mono); color: var(--ink-mute); }
.fc-foot {
  display: flex; justify-content: space-between; gap: 4px;
  font: 400 10px/1.2 var(--mono); color: var(--ink-mute);
  margin-top: 4px;
}
.fc-rs {
  font: 400 11px/1 var(--mono); color: var(--good);
  margin-top: 4px;
}
.forecast-empty {
  grid-column: 1 / -1;
  text-align: center; padding: 30px;
  font: 400 12px/1 var(--mono); color: var(--ink-mute);
}

/* ---------- Annual progress ---------- */
.annual-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 720px) { .annual-grid { grid-template-columns: 1fr; } }
.annual-cell {
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--bg);
  display: flex; flex-direction: column; gap: 8px;
}
.annual-label {
  font: 600 10px/1 var(--sans); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-mute);
}
.annual-value { font: 500 26px/1 var(--serif); color: var(--ink); }
.annual-bar {
  height: 8px; background: var(--rule); border-radius: 4px; overflow: hidden;
  margin-top: 4px;
}
.annual-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--ink-soft), var(--ink-mute));
  border-radius: 4px;
  transition: width .8s cubic-bezier(.2,.7,.2,1);
}
.annual-fill.accent { background: linear-gradient(90deg, var(--accent), var(--accent-soft)); }
.annual-fill.good   { background: linear-gradient(90deg, var(--good), #4caa5a); }
.annual-foot {
  font: 400 11px/1.3 var(--mono); color: var(--ink-mute);
}

/* ---------- Today's rhythm (parts-of-day + hour table) ---------- */
.parts-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 22px;
}
.part-cell {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto auto auto;
  gap: 2px 10px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--bg);
}
.part-icon {
  grid-row: 1 / span 2; grid-column: 1;
  font-size: 22px; line-height: 1; align-self: center;
}
.part-label {
  grid-row: 1; grid-column: 2;
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft);
}
.part-time {
  grid-row: 2; grid-column: 2;
  font: 400 11px/1.2 var(--mono); color: var(--ink-mute);
}
.part-value {
  grid-row: 1 / span 2; grid-column: 3; align-self: center;
  font: 500 22px/1 var(--serif); color: var(--ink); text-align: right;
}
.part-unit { display: none; }
.part-bar {
  grid-row: 3; grid-column: 1 / span 3;
  margin-top: 8px;
  display: block; height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden;
}
.part-bar-fill {
  display: block; height: 100%; background: var(--accent);
  transition: width .6s cubic-bezier(.2,.7,.2,1);
}
.part-pct {
  grid-row: 4; grid-column: 1 / span 3;
  font: 400 10px/1 var(--mono); color: var(--ink-mute);
  text-align: right; margin-top: 4px; letter-spacing: 0.04em;
}
@media (max-width: 920px) { .parts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .parts-grid { grid-template-columns: 1fr; } }

.hour-table-wrap { overflow-x: auto; }
.hour-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.hour-table th, .hour-table td {
  padding: 8px 10px; text-align: left;
  border-bottom: 1px solid var(--rule);
}
.hour-table th {
  font: 600 10px/1 var(--sans);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--ink-mute);
}
.hour-table th.num, .hour-table td.num { text-align: right; font-family: var(--mono); font-size: 12px; }
.hour-table td { color: var(--ink); font-family: var(--mono); font-size: 12px; }
.hour-table td:first-child { color: var(--ink-soft); }
.hour-table tbody tr:hover { background: var(--bg); }
.hour-table .bar-col { width: 22%; min-width: 100px; }
.row-bar {
  display: block; height: 5px; background: var(--rule); border-radius: 2px; overflow: hidden;
}
.row-bar-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
  border-radius: 2px;
}

/* ---------- Periods at a glance ---------- */
.period-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
@media (max-width: 1024px) { .period-grid { grid-template-columns: 1fr; } }
.period-col {
  padding: 18px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--bg);
}
.period-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.period-title {
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
}
.period-sub {
  font: 400 11px/1 var(--mono); color: var(--ink-mute);
}
.period-stats { margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.period-stats > div {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px dashed var(--rule);
}
.period-stats > div:last-child { border-bottom: 0; }
.period-stats dt {
  font: 400 12px/1.2 var(--sans); color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.period-stats dd {
  margin: 0;
  font: 500 16px/1 var(--serif); color: var(--ink);
  text-align: right;
}
.period-unit, .period-prefix {
  font: 400 11px/1 var(--mono); color: var(--ink-mute);
}
.period-prefix { margin-right: 2px; }
.period-when {
  display: block;
  font: 400 10px/1.2 var(--mono); color: var(--ink-mute);
  margin-top: 3px; letter-spacing: 0.03em;
}

.heatmap {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14px, 1fr));
  gap: 3px;
}
.heat-cell {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  border: 1px solid var(--rule);
}
.heat-cell.today { outline: 1.5px solid var(--accent); outline-offset: 1px; }
.heat-cell.future { opacity: 0.35; }

/* ---------- Records & milestones ---------- */
.records-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .records-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .records-grid { grid-template-columns: 1fr; } }
.record-cell {
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--bg);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  gap: 2px 14px;
  transition: border-color .2s, transform .2s;
}
.record-cell:hover { border-color: var(--accent); transform: translateY(-1px); }
.record-icon {
  grid-row: 1 / span 3; grid-column: 1;
  font-size: 28px; line-height: 1; align-self: center;
}
.record-label {
  grid-row: 1; grid-column: 2;
  font: 600 10px/1.2 var(--sans); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-mute);
}
.record-value {
  grid-row: 2; grid-column: 2;
  font: 500 24px/1 var(--serif); color: var(--ink);
}
.record-unit { font: 400 11px/1 var(--mono); color: var(--ink-mute); margin-left: 2px; }
.record-foot {
  grid-row: 3; grid-column: 2;
  font: 400 11px/1.3 var(--mono); color: var(--ink-mute);
  margin-top: 2px;
}

/* Make the heatmap cells more touchable + visible on phones. */
.heatmap { grid-template-columns: repeat(auto-fit, minmax(18px, 1fr)) !important; gap: 4px !important; }
.heat-cell { min-height: 18px; }

/* ---------- Environmental ledger ---------- */
.ledger-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1024px) { .ledger-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .ledger-grid { grid-template-columns: 1fr; } }
.ledger-cell {
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--bg);
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .2s, transform .2s;
}
.ledger-cell:hover { border-color: var(--accent); transform: translateY(-1px); }
.ledger-icon { font-size: 22px; line-height: 1; margin-bottom: 6px; }
.ledger-figure {
  font: 500 26px/1 var(--serif); color: var(--ink);
}
.ledger-unit {
  font: 600 11px/1.2 var(--sans);
  letter-spacing: 0.04em; color: var(--ink-soft);
}
.ledger-foot {
  font: 400 10px/1.4 var(--mono); color: var(--ink-mute);
  margin-top: 4px;
}

/* ---------- Inverter telemetry ---------- */
.telemetry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
/* When deviceRealtime is available, we group by block (AC / PV / EPS / etc.) */
.telemetry-grid.telemetry-blocks {
  display: flex; flex-direction: column; gap: 18px;
  grid-template-columns: none;
}
.tel-block { display: flex; flex-direction: column; gap: 10px; }
.tel-block-head {
  margin: 0; padding: 0 0 6px;
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--accent);
  border-bottom: 1px solid var(--rule);
}
.tel-block-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.telemetry-cell {
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--bg);
  display: flex; flex-direction: column; gap: 3px;
  transition: border-color .2s;
}
.telemetry-cell.idle { opacity: 0.55; }
.telemetry-cell:not(.idle) { border-color: var(--accent-soft); }
.tel-label {
  font: 600 10px/1.2 var(--sans);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-mute);
}
.tel-value {
  font: 500 20px/1 var(--mono); color: var(--ink);
}
.telemetry-cell.idle .tel-value { color: var(--ink-mute); }
.tel-unit {
  display: inline; font: 400 11px/1 var(--mono); color: var(--ink-mute);
  margin-left: 2px;
}

/* ---------- alarms ---------- */
.alarms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.alarms li {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 12px 14px;
  border-left: 3px solid var(--bad);
  background: var(--bg);
  font-size: 14px;
  border-radius: 0 10px 10px 0;
}
.alarms li.empty {
  border-left-color: var(--good);
  color: var(--ink-soft);
  font-style: italic;
  font-family: var(--serif);
  font-size: 16px;
}
.alarms .when { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); }
.alarms .alarm-code {
  font-family: var(--mono); font-size: 11px;
  background: rgba(179, 38, 30, 0.10);
  color: var(--bad);
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 6px;
  letter-spacing: 0.02em;
}
[data-theme='dark'] .alarms .alarm-code { background: rgba(255, 100, 90, 0.14); }
.alarms li.cleared { border-left-color: var(--good); opacity: 0.7; }
.alarms li.cleared .alarm-code { background: rgba(47, 125, 59, 0.10); color: var(--good); }
[data-theme='dark'] .alarms li.cleared .alarm-code { background: rgba(120, 200, 130, 0.14); }

/* ---------- footer ---------- */
.foot {
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--ink-mute); letter-spacing: 0.02em;
}
.foot button {
  background: transparent; border: 0; color: var(--ink-mute); cursor: pointer;
  font: inherit; padding: 4px 0; text-decoration: underline;
}

/* ---------- skeleton ---------- */
.skel {
  display: inline-block;
  background: linear-gradient(90deg, var(--rule), var(--bg-alt), var(--rule));
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  color: transparent !important;
  border-radius: 2px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- demo banner ---------- */
.demo-banner[hidden] { display: none !important; }
.demo-banner {
  background: linear-gradient(90deg, rgba(184,134,11,0.08), rgba(184,134,11,0.16), rgba(184,134,11,0.08));
  border: 1px solid var(--tag-border);
  color: var(--accent-dark);
  font-size: 12px; letter-spacing: 0.06em; padding: 10px 14px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-radius: 10px;
}
.demo-banner strong { font-weight: 600; }
.demo-banner code { font-family: var(--mono); font-size: 11px; padding: 1px 6px; background: var(--bg); border: 1px solid var(--tag-border); }
[data-theme='dark'] .demo-banner { color: var(--accent-soft); }

/* ---------- mobile ---------- */
@media (max-width: 720px) {
  .shell { padding: 14px 12px 96px; }
  .topbar { flex-wrap: wrap; gap: 8px; }
  .topbar-right { width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .hero-power .meta { margin-left: 0; width: 100%; }

  /* ---------- Mobile hero layout ---------- */
  /* Kill the dotted flow lines, anchor dots, particles, and sky overlay —
     they were anchored to off-screen tag positions and just left dots
     floating in empty space. On mobile we replace them with a compact data
     row below the factory image. */
  .hero { padding-bottom: 4px; }
  .factory .tag { display: none !important; }
  .factory .flow-svg,
  .factory .sky { display: none !important; }
  .factory .stage { aspect-ratio: 16 / 11; padding: 0; margin-bottom: 14px; }
  .factory img { object-fit: contain; }
  /* Tighten the gap between the kW figure and the factory image. */
  .hero-status { margin-bottom: 8px; }

  /* The 4-cell mobile data strip below the factory image (rendered via JS;
     #factory-mobile-strip). Compact horizontal scroll if it can't fit. */
  .factory-mobile-strip {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 4px;
  }
  .fms-cell {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
  }
  .fms-label {
    font: 600 9px/1.1 var(--sans);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-mute);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .fms-value {
    font: 500 18px/1 var(--serif);
    color: var(--ink);
    white-space: nowrap;
  }
  .fms-unit {
    font: 400 10px/1 var(--mono);
    color: var(--ink-mute);
  }
  .fms-foot {
    font: 400 9px/1.2 var(--mono);
    color: var(--ink-mute);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Highlight when this lane is actively carrying power. */
  .fms-cell.is-active { border-color: var(--accent); }
  .fms-cell.is-feed   { border-color: var(--good); }

  /* ---------- the rest of mobile ---------- */
  .cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .card { padding: 14px 12px; }
  .card .figure { font-size: 26px; }
  .panel { padding: 18px 14px; }
  .panel-head { flex-direction: column; gap: 10px; align-items: flex-start; }
  .panel-head > .stats-tabs,
  .panel-head > .forecast-total { align-self: flex-end; }
  h1 { font-size: 38px; }
  h2 { font-size: 22px; }
  .hour-table th, .hour-table td { padding: 6px 6px; font-size: 11px; }
  .hour-table .bar-col { min-width: 60px; }
  .device-strip { font-size: 11px; }
}

/* Hide the desktop-only flag on desktop; we toggle visibility via media query. */
.factory-mobile-strip { display: none; }

@media (max-width: 480px) {
  .shell { padding: 12px 10px 96px; }
  .hero-status { flex-direction: column; gap: 8px; align-items: flex-start; }
  .hero-power .figure { font-size: 44px; }
  h1 em { display: block; }
  /* The hour table is dense — on phones cut to 4 most useful columns. */
  .hour-table th:nth-child(4),
  .hour-table td:nth-child(4),
  .hour-table th:nth-child(5),
  .hour-table td:nth-child(5) { display: none; }
  .insight-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .insight { padding: 12px 10px; }
  .insight-figure { font-size: 22px; }
  .stats-tabs { flex-wrap: wrap; }
  .ledger-figure { font-size: 22px; }
}

/* ---------- view enter ---------- */
.fade-in { opacity: 0; transform: translateY(6px); animation: fade-in .55s cubic-bezier(.2,.7,.2,1) forwards; }
.fade-in.d1 { animation-delay: .05s; }
.fade-in.d2 { animation-delay: .15s; }
.fade-in.d3 { animation-delay: .25s; }
.fade-in.d4 { animation-delay: .35s; }
@keyframes fade-in { to { opacity: 1; transform: none; } }