/* Custom effects + component classes layered on top of Tailwind v4 utilities.
   (Tailwind utilities come from the browser build; this file owns the
   atmosphere: grid texture, scanlines, the live pulse, and reusable bits.) */

:root {
  --color-ink: #0a0d14;
  --color-panel: #111621;
  --color-panel-2: #161c2a;
  --color-line: #232c3d;
  --color-mute: #7c8aa5;
  --color-fg: #e6ebf4;
  --color-cyan: #35e0d8;
}

/* faint engineering grid + a warm radial glow up top for depth */
.grid-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(53, 224, 216, 0.07), transparent 60%),
    linear-gradient(var(--color-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-line) 1px, transparent 1px);
  background-size: 100% 100%, 44px 44px, 44px 44px;
  opacity: 0.5;
  mask-image: radial-gradient(140% 100% at 50% 0%, #000 40%, transparent 95%);
}
.scanlines {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.35;
  background: repeating-linear-gradient(transparent 0 3px, rgba(0, 0, 0, 0.18) 3px 4px);
  mix-blend-mode: multiply;
}

/* live pulse */
.live-dot {
  width: 8px; height: 8px; border-radius: 999px; background: var(--color-mute);
  box-shadow: 0 0 0 0 transparent; transition: background 0.3s;
}
.live-dot.on { background: var(--color-cyan); animation: pulse 2s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(53, 224, 216, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(53, 224, 216, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 224, 216, 0); }
}

/* staggered section reveal on load */
.reveal { opacity: 0; transform: translateY(14px); animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; animation-delay: var(--d, 0ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; opacity: 1; transform: none; } }

/* ── reusable component classes (kept here so markup stays readable) ── */
.section-h {
  font-family: var(--font-display, "Big Shoulders Display"), sans-serif;
  font-weight: 700; font-size: 1.6rem; letter-spacing: -0.01em;
  text-transform: uppercase;
}
.panel { background: var(--color-panel); border: 1px solid var(--color-line); border-radius: 0.75rem; }

/* Chart.js (maintainAspectRatio:false) fills its parent. The panel is a flex
   column so the chart grows to fill the card height — the row stretches both
   cards to equal height, and a fixed 280px box would otherwise leave dead
   space below the chart. min-height keeps it usable on short/mobile layouts. */
.chart-box { position: relative; flex: 1 1 auto; min-height: 260px; }

/* On desktop the region <select>s aren't flex-constrained and would size to
   their widest option ("ERCO — Electric Reliability Council of Texas"); cap
   them. On mobile they're flex-1/min-w-0 (fill their row, truncate), so no cap
   is needed — and a cap there would leave an awkward gap. */
@media (min-width: 640px) {
  #region-select, #ins-region { max-width: 14rem; }
}

.field, .field-cyan {
  background: var(--color-panel-2); border: 1px solid var(--color-line);
  color: var(--color-fg); border-radius: 0.5rem; padding: 0.5rem 0.7rem;
  font-family: var(--font-mono, monospace); font-size: 0.85rem; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field:focus { border-color: var(--color-mute); }
.field-cyan:focus { border-color: var(--color-cyan); box-shadow: 0 0 0 3px rgba(53, 224, 216, 0.15); }

.btn-cyan {
  background: var(--color-cyan); color: #04201f; font-weight: 600;
  font-family: var(--font-mono, monospace); font-size: 0.85rem;
  border-radius: 0.5rem; padding: 0.5rem 1.1rem; transition: transform 0.1s, filter 0.15s;
}
.btn-cyan:hover { filter: brightness(1.1); }
.btn-cyan:active { transform: translateY(1px); }
.btn-cyan:disabled { opacity: 0.5; cursor: wait; }
.btn-ghost {
  border: 1px solid var(--color-cyan); color: var(--color-cyan);
  font-family: var(--font-mono, monospace); font-size: 0.85rem;
  border-radius: 0.5rem; padding: 0.45rem 1rem; transition: background 0.15s;
}
.btn-ghost:hover { background: rgba(53, 224, 216, 0.1); }

.chip {
  font-family: var(--font-mono, monospace); font-size: 0.8rem;
  padding: 0.35rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--color-line); color: var(--color-mute);
  background: var(--color-panel); cursor: pointer; transition: all 0.15s;
}
.chip:hover { color: var(--color-fg); border-color: var(--color-mute); }
.chip.active { color: #04201f; background: var(--color-cyan); border-color: var(--color-cyan); }

.ex-chip { color: var(--color-cyan); border: 1px dashed var(--color-cyan-dim, #1b6f6b); border-radius: 999px; padding: 0.25rem 0.7rem; cursor: pointer; transition: background 0.15s; }
.ex-chip:hover { background: rgba(53, 224, 216, 0.08); }

.badge { font-family: var(--font-mono, monospace); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.25rem 0.6rem; border-radius: 999px; color: #04140f; }
.badge-sm { font-family: var(--font-mono, monospace); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-mute); }

/* fuel mix bars */
.fuel-row { display: grid; grid-template-columns: 70px 1fr 56px; align-items: center; gap: 0.6rem; font-family: var(--font-mono, monospace); font-size: 0.78rem; }
.fuel-track { display: block; height: 8px; background: var(--color-line); border-radius: 999px; overflow: hidden; }
.fuel-fill { display: block; height: 100%; border-radius: 999px; transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }

/* compare bars */
.cmp-row { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 0.7rem; }
.cmp-track { display: block; height: 26px; background: var(--color-panel-2); border-radius: 0.4rem; overflow: hidden; border: 1px solid var(--color-line); }
.cmp-fill { display: block; height: 100%; transition: width 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }

/* result table */
#ask-table th, #ask-table td { padding: 0.45rem 0.8rem; text-align: left; border-bottom: 1px solid var(--color-line); }
#ask-table th { color: var(--color-mute); text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.06em; }
#ask-table tr:last-child td { border-bottom: none; }

.stat-tile { background: var(--color-panel); padding: 0.8rem 1rem; }
.stat-tile .k { font-family: var(--font-mono, monospace); font-size: 0.62rem; color: var(--color-mute); text-transform: uppercase; letter-spacing: 0.05em; }
.stat-tile .v { font-family: var(--font-display, sans-serif); font-weight: 700; font-size: 1.4rem; }

/* toast — hidden via opacity+visibility (not just transform): an empty toast is
   short, so a transform-only offset left a red sliver peeking at the screen
   bottom. opacity/visibility guarantee it's gone until `.show`. */
.toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translate(-50%, 1rem);
  background: #2a1116; border: 1px solid #5a2630; color: #ffb4bd;
  font-family: var(--font-mono, monospace); font-size: 0.8rem;
  padding: 0.6rem 1rem; border-radius: 0.5rem; z-index: 50;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
  max-width: 90vw;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; pointer-events: auto; }

.skeleton { color: transparent !important; background: linear-gradient(90deg, var(--color-line) 25%, var(--color-panel-2) 50%, var(--color-line) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 4px; display: inline-block; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* skeleton building blocks: shimmer rectangle (size via inline style) + a
   full-bleed overlay for the chart, so every panel has an accurate loading
   state with no layout shift when real data arrives. */
.sk { background: linear-gradient(90deg, var(--color-line) 25%, var(--color-panel-2) 50%, var(--color-line) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 5px; }
.chart-sk { position: absolute; inset: 0; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .skeleton, .sk, .spinner { animation: none; } }

/* inline spinner for in-progress buttons (AI ask / insights) */
.spinner {
  display: inline-block; width: 0.85em; height: 0.85em; vertical-align: -0.1em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* narrated-insights markdown: the model emits **bold** / `code`; render it */
#ins-text strong { font-weight: 600; color: var(--color-fg); }
#ins-text em { font-style: italic; }
#ins-text code {
  font-family: var(--font-mono, monospace); font-size: 0.9em;
  background: var(--color-panel-2); border: 1px solid var(--color-line);
  border-radius: 0.3rem; padding: 0.05rem 0.3rem;
}