/* STORM trend chart — inline SVG renderer */

.storm-trend-wrap {
  position: relative;
  max-width: 960px;
  margin: 1.25rem auto 2rem;
  padding: 1rem;
  background: var(--rollup-bg, #fff);
  border: 1px solid var(--border-subtle, silver);
  border-radius: 8px;
  box-shadow: 0 1px 2px var(--shadow-color, rgba(0, 0, 0, 0.08));
}

.storm-trend-wrap svg { display: block; width: 100%; height: auto; }

/* Grid + axes */
.stg-grid line {
  stroke: var(--border-subtle, silver);
  stroke-opacity: 0.35;
  stroke-width: 1;
}
.stg-tick {
  stroke: var(--body-text, #333);
  stroke-opacity: 0.6;
}
.stg-axis-label {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 11px;
  fill: var(--gallery-stats, #595959);
}
.stg-axis-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  font-weight: 600;
  fill: var(--body-text, #333);
}

/* Series */
.stg-series circle { cursor: pointer; transition: r 120ms ease; }
.stg-series circle:hover,
.stg-series circle:focus { outline: none; }
.stg-series-real circle { /* subtle highlight on the real-STORM line */ }

/* Legend */
.stg-legend-label {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  fill: var(--body-text, #333);
  dominant-baseline: middle;
}
.stg-legend-label-real { font-weight: 700; }

/* Tooltip */
.stg-tooltip {
  position: absolute;
  background: var(--body-text, #333);
  color: var(--surface, #fff);
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

@media (prefers-color-scheme: dark) {
  .stg-tooltip {
    background: var(--body-text, #d0d2e0);
    color: var(--body-background, #141416);
  }
}