/* charts.css — shared shell for the standalone chart pages:
   /best-worst-value-cities (valueChart.php) and
   /housing-affordability-vs-homes-built (housingAffordability.php).
   Page-specific chart internals (bars, dots, axes) stay in each page's own style block. */

.chart-page{max-width:840px;margin:0 auto;padding:22px 20px 40px;font:15px/1.55 -apple-system,system-ui,sans-serif;}
.chart-page h1{font-size:30px;line-height:1.15;margin:0 0 12px;font-weight:800;letter-spacing:-.02em;}
.chart-page .chart-intro{font-size:15px;margin:0 0 22px;opacity:.75;}
.chart-page .chart-intro a{color:inherit;text-decoration:underline;}

/* the same card look as the site's tables: white in light mode, dark element color in dark mode */
.chart-card{background:var(--element-background-color);border:1px solid var(--global-border-color);border-radius:12px;padding:22px 22px 16px;margin:0 0 28px;}
.chart-card h2{font-size:21px;line-height:1.25;margin:0 0 6px;font-weight:700;}
.chart-card .chart-sub{font-size:14.5px;opacity:.65;margin:0 0 18px;}
.chart-card .chart-source{font-size:12.5px;opacity:.6;margin:14px 0 0;line-height:1.5;}
.chart-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin:0 3px 0 8px;vertical-align:baseline;}

@media (max-width:560px){
	.chart-card{padding:16px 12px 12px;}
}