/* Graphics utility classes for inline SVG illustrations */

svg.illustration {
  width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem auto;
}
svg.illustration.full   { max-width: 100%; }
svg.illustration.wide   { max-width: 800px; }
svg.illustration.medium { max-width: 600px; }
svg.illustration.narrow { max-width: 400px; }

/* Inline icons next to headings */
svg.section-icon {
  width: 28px;
  height: 28px;
  vertical-align: -6px;
  margin-right: 0.5rem;
  color: var(--fmt-accent);
}
h2 svg.section-icon { width: 32px; height: 32px; vertical-align: -7px; }
h3 svg.section-icon { width: 22px; height: 22px; vertical-align: -4px; }

/* Pulse animation for active elements */
@keyframes pulse-glow {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
.animate-pulse-glow { animation: pulse-glow 2.4s ease-in-out infinite; }

@keyframes flow-dash {
  to { stroke-dashoffset: -20; }
}
.animate-flow { stroke-dasharray: 6 4; animation: flow-dash 1.5s linear infinite; }

/* US map state styling */
svg.us-map .state {
  fill: rgba(255, 255, 255, 0.07);
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 0.6;
  transition: fill 0.15s, stroke 0.15s;
  cursor: pointer;
}
svg.us-map .state:hover { stroke: white; stroke-width: 1.2; }
svg.us-map .state.high { fill: rgba(33, 196, 93, 0.55); }
svg.us-map .state.mid  { fill: rgba(244, 164, 32, 0.55); }
svg.us-map .state.low  { fill: rgba(255, 255, 255, 0.10); }
svg.us-map .state.high:hover { fill: rgba(33, 196, 93, 0.80); }
svg.us-map .state.mid:hover  { fill: rgba(244, 164, 32, 0.80); }
svg.us-map .state.low:hover  { fill: rgba(255, 255, 255, 0.20); }
svg.us-map text.label {
  fill: rgba(255,255,255,0.85);
  font-size: 10px;
  font-family: system-ui, sans-serif;
  text-anchor: middle;
  pointer-events: none;
  font-weight: 600;
}

/* Wire gauge visual */
.wire-gauge-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: var(--fmt-card);
  border: 1px solid var(--fmt-card-border);
  border-radius: 10px;
}
.wire-sample { text-align: center; }
.wire-sample .swatch {
  background: linear-gradient(135deg, #b87333, #d4a574);
  border-radius: 50%;
  margin: 0 auto 0.4rem;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.1), inset 0 -3px 5px rgba(0,0,0,0.3);
}
.wire-sample .gauge-label { font-weight: 700; font-size: 0.95rem; display: block; }
.wire-sample .gauge-amps { font-size: 0.78rem; color: var(--fmt-muted); display: block; }

/* Section heading with icon */
.with-icon { display: flex; align-items: center; gap: 0.6rem; }