/* graphs */

.graph svg {
    font: 10px sans-serif;
    fill: oklch(var(--p)/1);
    color: oklch(var(--bc)/1);
    max-width: 100%;
    height: auto;
}
.graph svg.horizontal .labels {
    fill: oklch(var(--pc)/1);
    font-size: 1.4em;
    text-anchor: start;
}
@media (max-width: 768px) {
    .graph svg.horizontal .labels {
        font-size: 1.8em;
    }
}
.graph svg .labels {
    fill: oklch(var(--p)/1);
    font-size: 1.4em;
    text-anchor: middle;
    font-weight: bold;
    pointer-events: none;
}
@media (max-width: 768px) {
    .graph svg .labels {
        font-size: 1.8em;
    }
}
.graph svg .labels text.text-uncontained {
    fill: oklch(var(--bc)/1);
}
.graph svg g.axis {
    font-size: 1.5em;
}
@media (max-width: 768px) {
    .graph svg g.axis {
        font-size: 1.6em;
    }
}
.graph svg g.bar-container {
    fill: oklch(var(--p)/1);
}