/* ============================================================
   chart.css — Shared container styles for all D3 charts
   Chart-specific styles (colors, tooltips, labels) live
   inside each chart's own .js file
   ============================================================ */

/* ── Shared Chart Container ──────────────────────────────── */
.chart-container {
  position: relative;
  width: 50vw;
  max-width: 1000px;
  left: 50%;
  transform: translateX(-50%);
  margin: 3rem 0;
}

.chart-container svg {
  width: 100%;
  height: auto;
}

/* ── Map Container ──────────────────────────────── */
.map-container {
  position: relative;
  width: 50vw;
  max-width: 1000px;
  left: 50%;
  transform: translateX(-50%);
  margin: 3rem 0;
}

.map-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #111111;
    line-height: 1.3;
    margin: 0 0 0.3rem 0;
    }
/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  .chart-container {
    max-width: 100vw;
  }
}