/* SVG chart styling shared across modules. */

.chart svg { display: block; }

.us-map svg .state {
  cursor: pointer;
  stroke: none;
  transition: opacity 0.15s ease;
}
.us-map svg .state:hover { opacity: 0.82; }
.us-map svg .state.selected { stroke: var(--ink); stroke-width: 2.5; }

/* Click feedback: the picked state glows off-white in all four maps, then
   fades back to its choropleth color (the omitted fill at 100% animates to
   the underlying inline style; CSS animations outrank inline styles). */
.us-map svg .state.flash { animation: state-flash 1s ease-out; }
@keyframes state-flash {
  0%, 25% {
    fill: #F8F6F0;
    filter: drop-shadow(0 0 9px rgba(248, 246, 240, 0.6));
  }
  100% { filter: drop-shadow(0 0 0 rgba(248, 246, 240, 0)); }
}

.us-map svg .state-borders {
  fill: none;
  stroke: var(--paper);
  stroke-width: 1;
  pointer-events: none;
}

.us-map svg.metric-coal .state-borders {
  stroke: #FFFFFF;
  stroke-width: 1.1;
}

.axis text {
  font-family: var(--font-ui);
  font-size: 12px;
  fill: var(--ink-soft);
}
.axis line, .axis path { stroke: var(--rule); }

.axis-label {
  font-family: var(--font-ui);
  font-size: 12px;
  fill: var(--ink-soft);
}

.band-label {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  paint-order: stroke;
  stroke: rgba(255, 253, 246, 0.001); /* keep crisp, no halo on dark bands */
  pointer-events: none;
}

.line-label {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
}

.strip-note, .strip-you {
  font-family: var(--font-ui);
  font-size: 12px;
  fill: var(--ink-soft);
}
.strip-you { font-weight: 700; fill: var(--ink); }