:root {
  --series-a: #1d5fa8;
  --series-b: #b35c00;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --series-a: #3f8fd2;
    --series-b: #c47f0c;
  }
}

:root[data-theme="dark"] {
  --series-a: #3f8fd2;
  --series-b: #c47f0c;
}

.post-chart { margin: 1.5rem 0; }

.chart-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; }
.chart-tile { padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.chart-tile strong { display: block; font: 600 1.5rem/1.2 var(--mono); }
.chart-tile span { display: block; margin-top: 0.25rem; color: var(--muted); font-size: 0.86rem; line-height: 1.4; }

.chart-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-bottom: 0.25rem; color: var(--muted); font-size: 0.85rem; }
.chart-key { display: inline-block; width: 1.1rem; margin-right: 0.4rem; vertical-align: middle; border-top: 2px solid; }
.chart-key.a { border-color: var(--series-a); }
.chart-key.b { border-color: var(--series-b); }

.chart-plot { position: relative; }
.chart-plot svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.chart-plot text { fill: var(--muted); font-family: var(--mono); font-size: 11px; }
.chart-grid { stroke: var(--line); }
.chart-tick, .chart-mark, .chart-cross { stroke: var(--muted); }
.chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-line.a { stroke: var(--series-a); }
.chart-line.b { stroke: var(--series-b); }
.chart-area { opacity: 0.1; }
.chart-area.a, .chart-band, .chart-dot.a { fill: var(--series-a); }
.chart-area.b, .chart-dot.b { fill: var(--series-b); }
.chart-band { opacity: 0.15; }
.chart-dot { stroke: var(--surface); stroke-width: 2; }

.chart-tip { position: absolute; top: 0; z-index: 2; min-width: 11rem; padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); font-size: 0.8rem; line-height: 1.5; pointer-events: none; }
.chart-tip[hidden] { display: none; }
.chart-tip b { font-family: var(--mono); }
.chart-swatch { display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.35rem; border-radius: 50%; }
.chart-swatch.a { background: var(--series-a); }
.chart-swatch.b { background: var(--series-b); }

.chart-values { margin-top: 0.75rem; color: var(--muted); font-size: 0.9rem; }
.chart-values summary { cursor: pointer; }
.chart-values table { display: table; width: 100%; margin: 0.6rem 0 0; font: 0.82rem var(--mono); }
.chart-values th, .chart-values td { text-align: right; white-space: nowrap; }
.chart-values th:first-child, .chart-values td:first-child { text-align: left; }
.chart-values-scroll { overflow-x: auto; }