/* ==========================================================================
   KB Brand System — Data Visualization
   Chart/map styles, dark viz container, axis styling
   Dependencies: brand-tokens.css, colors.css (viz tokens, dark surfaces)
   Used by: all pages via base.njk <link>; D3 charts reference these classes
   ========================================================================== */

/* --- Dark Viz Container --- */
.viz-container {
  background-color: var(--dark-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  color: var(--color-text-primary);
}

/* --- Chart Title --- */
.chart-title {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-semi);
  color: var(--viz-text-primary);
  margin-bottom: var(--space-md);
}

.chart-subtitle {
  font-family: var(--font-meta);
  font-size: var(--text-small);
  color: var(--viz-text-muted);
  margin-bottom: var(--space-lg);
}

/* --- SVG Chart Defaults --- */
.viz-container svg {
  overflow: visible;
}

/* --- D3 Axis Styling --- */
.viz-container .axis text,
.viz-container .tick text {
  font-family: var(--font-meta);
  font-size: var(--text-micro);
  fill: var(--viz-text-muted);
}

.viz-container .axis line,
.viz-container .tick line {
  stroke: var(--viz-stroke);
}

.viz-container .axis path,
.viz-container .domain {
  stroke: var(--viz-stroke);
}

/* --- Grid Lines --- */
.viz-container .grid line {
  stroke: var(--viz-grid);
  stroke-dasharray: 2, 4;
}

.viz-container .grid .domain {
  stroke: none;
}

/* --- Chart Tooltip (used by chart module library) --- */
.chart-tip {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  background: var(--color-overlay-dark);
  color: var(--viz-text-primary);
  font-family: var(--font-meta);
  font-size: 11px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  z-index: 100;
  white-space: nowrap;
  transition: opacity 150ms;
  box-shadow: var(--shadow-lg);
}

.chart-tip--light {
  background: rgba(255,255,255,0.95);
  color: #1a1a1a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  border: 1px solid rgba(0,0,0,0.08);
}

/* --- Tooltip --- */
.viz-tooltip {
  position: absolute;
  pointer-events: none;
  background-color: var(--color-overlay-dark);
  color: var(--viz-text-primary);
  font-family: var(--font-meta);
  font-size: var(--text-small);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  z-index: var(--z-dropdown);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.viz-tooltip.visible {
  opacity: 1;
}

/* --- Legend --- */
.viz-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.viz-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.viz-legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-sm);
}

.viz-legend__label {
  font-family: var(--font-meta);
  font-size: var(--text-small);
  color: var(--viz-text-secondary);
}

/* --- Chart Caption --- */
.chart-caption {
  font-family: var(--font-meta);
  font-size: var(--text-small);
  color: var(--viz-text-muted);
  margin-top: var(--space-md);
  text-align: right;
}

/* --- Light Mode Viz Override --- */
.viz-container--light {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
}

.viz-container--light .axis text,
.viz-container--light .tick text {
  fill: var(--color-text-muted);
}

.viz-container--light .axis line,
.viz-container--light .tick line {
  stroke: var(--color-border);
}

.viz-container--light .grid line {
  stroke: var(--color-border);
}

/* --- Map Container --- */
.map-container {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--dark-bg);
}

.map-container .mapboxgl-map {
  width: 100%;
}

/* --- Hex Map --- */
.hex-map {
  background-color: var(--dark-bg);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
}

.hex-map .state-hex {
  stroke: white;
  stroke-width: 1.5;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.hex-map .state-hex:hover {
  opacity: 0.8;
}

.hex-map .state-label {
  font-family: var(--font-meta);
  font-size: var(--text-micro);
  fill: var(--color-text-secondary);
  text-anchor: middle;
  pointer-events: none;
}

/* --- Responsive chart sizing --- */
@media (max-width: 768px) {
  .viz-container {
    padding: var(--space-md);
  }

  .chart-title {
    font-size: var(--text-meta);
  }
}