.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; max-width: 100%; overflow: visible; }
.chart svg.narrow { display: none; }
@media (max-width: 700px) { .chart svg.wide { display: none; } .chart svg.narrow { display: block; } }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-family: var(--font-mono); font-size: 11px; }
.chart .rowlabel { fill: var(--text); font-family: var(--font-body); font-size: 13px; }
.chart .rowcount { fill: var(--dim); font-family: var(--font-mono); font-size: 11px; }
.chart .val { fill: var(--text); font-family: var(--font-mono); font-size: 10.5px; }
.chart .bar path { transition: opacity .15s; }
.chart .bar:hover path, .chart .bar:focus path { opacity: .75; }
.chart .bar:focus { outline: none; }
.chart .bar:focus .hit { stroke: var(--accent); stroke-width: 1; }
.chart .hit { fill: transparent; }
.chart-table { margin-top: 1rem; }
.chart-table summary { cursor: pointer; font-family: var(--font-mono); font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.chart-table table { border-collapse: collapse; margin-top: .6rem; font-size: .85rem; font-variant-numeric: tabular-nums; }
.chart-table th, .chart-table td { padding: .3rem .9rem .3rem 0; text-align: right; border-bottom: 1px solid var(--line); }
.chart-table th:first-child, .chart-table td:first-child { text-align: left; }
.chart-table th { color: var(--muted); font-weight: 500; }