/* Dynamic chart geometry uses SVG attributes so strict CSP remains enabled. */
.overview-bar-track > svg { display: block; width: 100%; height: 8px; }
.overview-bar-percentage { color: #7a8c70; font-weight: 400; }
.overview-histogram-slot > svg { display: block; flex: 1; min-width: 0; overflow: visible; }
.overview-histogram-slot .overview-histogram-count { position: static; fill: #587454; }
.overview-histogram-link { display: grid; grid-template-rows: 150px 28px; grid-row: 1 / -1; min-width: 0; color: inherit; text-decoration: none; }
.overview-histogram-link:hover .overview-histogram-label { color: #355c49; text-decoration: underline; }
.overview-histogram-link:focus-visible { outline: 2px solid #61927f; outline-offset: 4px; border-radius: 3px; }
@media (max-width: 400px) { .overview-histogram-link { grid-template-rows: 150px 37px; } }

.overview-comparison-table { min-width: 820px; }
.overview-comparison-table td, .overview-comparison-table th { text-align: center; }
.overview-comparison-table th:first-child { text-align: start; }
.overview-comparison-table td:last-child, .overview-comparison-table th:last-child { text-align: center; width: auto; }
.overview-comparison-table a { text-underline-offset: 3px; }
.overview-comparison-table a:hover { text-decoration: underline; }