/* One quiet series, clear axes, precise values on demand. */
:root { --data-1: #68A7FF; --data-2: #7ACCCD; --data-3: #C5B487; }
.chartbox { min-width: 0; }
.chart { width: 100%; max-width: 100%; display: block; touch-action: pan-y; overflow: visible; }
.chart:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.chart text { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.chart-tip { top: 0; max-width: 100%; background: var(--panel); border-color: var(--border); padding: 7px 10px; border-radius: 6px; box-shadow: none; white-space: normal; overflow-wrap: anywhere; }
.chart-tip[hidden] { display: none; }
.chart-tip__v { font-family: var(--mono); font-size: 12px; font-weight: 500; }
.chart-tip__x { font-family: var(--mono); font-size: 10px; margin-top: 3px; }
.chart-data { margin-top: 8px; color: var(--dim); font: 10px/1.8 var(--mono); }
.chart-data > summary { width: fit-content; min-height: 28px; cursor: pointer; }
.chart-data__scroll { max-height: 240px; overflow: auto; margin-top: 8px; }
.chart-data table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.chart-data caption { text-align: left; padding-bottom: 8px; }
.chart-data th, .chart-data td { padding: 6px 0; border-bottom: 1px solid var(--border); text-align: left; font-weight: 400; }
.chart-data td, .chart-data thead th:last-child { text-align: right; padding-left: 12px; }

.chart-readout { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 38px; padding: 0 0 6px; }
.chart-readout__value { color: var(--text); font: 500 25px/1.25 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.chart-readout__period { color: var(--dim); font: 10px/1.6 var(--mono); text-align: right; overflow-wrap: anywhere; max-width: 55%; }
.chart-series { transition: stroke-width .18s ease; }
.chart:hover .chart-series, .chart:focus-visible .chart-series { stroke-width: 2.7; }
.chart-bar { transition: opacity .18s ease; }
.chart-data > summary { min-height: 32px; display: list-item; padding-top: 6px; }
@media (prefers-reduced-motion: reduce) { .chart-series, .chart-bar { transition: none; } }