.research-chart {
    margin-block: 1.5rem;
    border: 1px solid var(--line);
    background: var(--surface);
}
.research-chart > figcaption {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--line);
    font: 500 0.85rem/1.5 var(--sans);
}
.research-chart picture,
.research-chart img {
    display: block;
    width: 100%;
    height: auto;
}
.research-chart .chart-note {
    margin: 0;
    padding: 0 1.25rem 1.25rem;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.65;
}
.chart-data {
    border-block: 1px solid var(--line);
}
.chart-data summary {
    padding: 0.85rem 1.25rem;
    cursor: pointer;
    font: 0.75rem/1.6 var(--mono);
}
.chart-data summary:hover {
    background: var(--surface-raised);
}
.chart-data summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -3px;
}
.chart-data table {
    width: 100%;
    border-collapse: collapse;
    font: 0.8rem/1.6 var(--sans);
}
.chart-data caption {
    text-align: left;
    padding: 0.75rem 1.25rem;
    color: var(--muted);
}
.chart-data th,
.chart-data td {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    font-weight: 400;
}
.chart-data thead th {
    font-weight: 500;
}
.chart-data td {
    font-variant-numeric: tabular-nums;
}
.chart-data > p {
    margin: 1rem 1.25rem;
    font-size: 0.8rem;
    color: var(--muted);
}
.chart-downloads {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 0.85rem 1.25rem;
    font: 0.7rem/1.6 var(--mono);
}
@media print {
    .research-chart {
        break-inside: avoid;
    }
    .chart-downloads,
    .chart-data {
        display: none;
    }
    .research-chart .chart-note {
        color: #333;
    }
}