/* Chart card + canvas sizing. */
chart-card { display: block; }
.chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.chart-card .ch-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.chart-card .ch-head h3 { font-size: var(--fs-md); font-weight: 650; }
.chart-card .ch-head .actions { margin-left: auto; }
.chart-canvas-wrap { position: relative; flex: 1; min-height: 220px; }
.chart-canvas-wrap.tall { min-height: 300px; }
.chart-canvas-wrap.short { min-height: 150px; }
canvas { max-width: 100%; }

.legend-inline { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-muted); }
.legend-inline .li { display: inline-flex; align-items: center; gap: 6px; }
.legend-inline .sw { width: 10px; height: 10px; border-radius: 3px; }

/* Heatmap overlay */
.heatmap-stage { position: relative; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--surface-2); }
.heatmap-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Geo map */
.geo-wrap { position: relative; min-height: 360px; }