/* ============================================================
   PVSim showcase — the live "gallery" plant page.
   SVG hero + animated current flow + weather layer + gauges + charts.
   Data charts use the validated dataviz palette (see :root below);
   the decorative hero uses the brand accent.
   ============================================================ */

.showcase {
  /* Dataviz data-ink tokens (light) — separate from the brand accent. */
  --viz-surface:  #fcfcfb;
  --viz-ink:      #0b0b0b;
  --viz-ink-2:    #52514e;
  --viz-muted:    #898781;
  --viz-grid:     #e1e0d9;
  --viz-axis:     #c3c2b7;
  --viz-series-1: #2a78d6;   /* actual production */
  --viz-good:     #0ca30c;
  --viz-warn:     #fab219;
  --viz-crit:     #d03b3b;

  /* Flow animation controls (driven by JS from live power). */
  --flow-speed: 3s;
  --flow-intensity: 0.9;
}
:root[data-theme="dark"] .showcase {
  --viz-surface:  #1a1a19;
  --viz-ink:      #ffffff;
  --viz-ink-2:    #c3c2b7;
  --viz-grid:     #2c2c2a;
  --viz-axis:     #383835;
  --viz-series-1: #3987e5;
}

/* ---- Hero scene ---- */
.hero {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, var(--sky-1), var(--sky-2));
  aspect-ratio: 16 / 7;
  min-height: 280px;
}
.hero svg { display: block; width: 100%; height: 100%; }

/* Sun halo pulse (intensity set via --halo-scale from irradiance). */
#sunHalo { transform-box: fill-box; transform-origin: center; }
@keyframes haloPulse { 0%,100% { opacity:.35 } 50% { opacity:.7 } }
.hero.daylight #sunHalo { animation: haloPulse calc(4s / var(--speed)) ease-in-out infinite; }

/* Current-flow particles: dashed overlay whose offset animates. */
.flow-path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 2 16;
  opacity: var(--flow-intensity);
  filter: drop-shadow(0 0 4px var(--accent));
  animation: flowMove var(--flow-speed) linear infinite;
}
@keyframes flowMove { to { stroke-dashoffset: -180; } }
.hero.stopped .flow-path { animation: none; opacity: 0; }

/* Inverter glow while producing. */
@keyframes invPulse { 0%,100% { opacity:.5 } 50% { opacity:1 } }
.hero.producing #inverterGlow { animation: invPulse calc(2.4s / var(--speed)) ease-in-out infinite; }
.hero:not(.producing) #inverterGlow { opacity: 0; }

/* Fault flashing. */
@keyframes faultFlash { 0%,100% { opacity:0 } 50% { opacity:.85 } }
.hero.fault #faultOverlay { animation: faultFlash calc(1s / var(--speed)) steps(1) infinite; }

/* Weather overlays. */
.wx { opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.hero[data-wx="clouds"]   #wxClouds,
.hero[data-wx="overcast"] #wxClouds { opacity: 1; }
.hero[data-wx="overcast"] #wxClouds { opacity: 1; filter: brightness(.8); }
.hero[data-wx="rain"]  #wxClouds,
.hero[data-wx="rain"]  #wxRain   { opacity: 1; }
.hero[data-wx="dust"]  #wxDust   { opacity: 1; }
.hero[data-wx="fog"]   #wxFog    { opacity: 1; }

@keyframes cloudDrift { from { transform: translateX(0) } to { transform: translateX(60px) } }
#wxClouds > g { animation: cloudDrift calc(22s / var(--speed)) ease-in-out infinite alternate; }

@keyframes rainFall { to { transform: translateY(60px) } }
#wxRain line { animation: rainFall calc(.7s / var(--speed)) linear infinite; }

/* Live badge over hero. */
.live-badge {
  position:absolute; top:14px; inset-inline-start:14px;
  background: rgba(0,0,0,.35); color:#fff; backdrop-filter: blur(6px);
  padding:.3rem .7rem; border-radius:999px; font-size:.8rem; font-weight:700;
  display:flex; align-items:center; gap:.4rem;
}
.live-badge .dot { width:.55rem; height:.55rem; border-radius:50%; background:#31d17a; box-shadow:0 0 0 0 rgba(49,209,122,.7); animation: liveDot 1.6s infinite; }
@keyframes liveDot { 0%{ box-shadow:0 0 0 0 rgba(49,209,122,.6) } 70%{ box-shadow:0 0 0 8px rgba(49,209,122,0) } 100%{ box-shadow:0 0 0 0 rgba(49,209,122,0) } }

.hero-weather {
  position:absolute; top:14px; inset-inline-end:14px;
  background: rgba(0,0,0,.35); color:#fff; backdrop-filter: blur(6px);
  padding:.3rem .7rem; border-radius:14px; font-size:.8rem; text-align:end;
}

/* ---- Gauges ---- */
.gauge { text-align:center; }
.gauge svg { width: 100%; max-width: 130px; height:auto; }
.gauge .g-val { font-size:1.15rem; font-weight:800; fill: var(--text); }
.gauge .g-lbl { font-size:.72rem; color: var(--muted); margin-top:.2rem; }
.gauge-track { stroke: var(--border); }

/* ---- Counters ---- */
.counter .num { font-size:1.4rem; font-weight:800; font-variant-numeric: tabular-nums; }
.counter .cap { font-size:.72rem; color: var(--muted); }

/* ---- Charts ---- */
.chart-card svg { width:100%; height:auto; display:block; }
.chart-legend { display:flex; gap:1rem; font-size:.78rem; color: var(--muted); flex-wrap:wrap; }
.chart-legend .k { display:inline-flex; align-items:center; gap:.35rem; }
.chart-legend .sw { width:14px; height:3px; border-radius:2px; display:inline-block; }
.chart-tip {
  position:absolute; pointer-events:none; background: var(--surface-2); border:1px solid var(--border);
  border-radius:8px; padding:.35rem .55rem; font-size:.75rem; box-shadow: var(--shadow);
  transform: translate(-50%, -120%); white-space:nowrap; opacity:0; transition:opacity .1s; z-index:5;
}

/* ---- Toolbar ---- */
.toolbar { position: sticky; top: 68px; z-index: 500; }
.toolbar .swatch { width:22px; height:22px; border-radius:6px; border:2px solid transparent; cursor:pointer; }
.toolbar .swatch.active { border-color: var(--text); }

#miniMap { height: 220px; border-radius: var(--r-md); overflow:hidden; }