:root {
  --chart-surface: #ffffff;
  --chart-current: #1c5cab;
  --chart-prev: #3987e5;
  --chart-ref: #52514e;
  --chart-grid: #e7e5df;
  --chart-axis: #c3c2b7;
  --chart-band: #cfe1f1;
  --chart-band-alt: #e8e6de;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --chart-surface: #1b1e21;
    --chart-current: #86b6ef;
    --chart-prev: #3987e5;
    --chart-ref: #7d7a73;
    --chart-grid: #2a2e32;
    --chart-axis: #454a50;
    --chart-band: #274a6b;
    --chart-band-alt: #2b3035;
  }
}

:root[data-theme="dark"] {
  --chart-surface: #1b1e21;
  --chart-current: #86b6ef;
  --chart-prev: #3987e5;
  --chart-ref: #7d7a73;
  --chart-grid: #2a2e32;
  --chart-axis: #454a50;
  --chart-band: #274a6b;
  --chart-band-alt: #2b3035;
}

.chart {
  position: relative;
  margin: 0;
  max-width: 100%;
  break-inside: avoid;
}

.chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.chart svg:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.grid { fill: none; stroke: var(--chart-grid); stroke-width: 1; }
.axis { fill: none; stroke: var(--chart-axis); stroke-width: 1; }
.crosshair { fill: none; stroke: var(--chart-axis); stroke-width: 1; }
.mark-ref { fill: none; stroke: var(--chart-ref); stroke-width: 1.5; }
.mark-ref.dash { stroke-dasharray: 4 3; }

.bar,
.marker,
.edge-current { fill: var(--chart-current); stroke: var(--chart-current); }
.line-current { fill: none; stroke: var(--chart-current); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.poly-current { fill: var(--chart-current); fill-opacity: 0.1; stroke: var(--chart-current); stroke-width: 2; stroke-linejoin: round; }
.poly-prev { fill: none; stroke: var(--chart-prev); stroke-width: 1.5; stroke-linejoin: round; }
.dot-current { fill: var(--chart-current); stroke: var(--chart-surface); stroke-width: 2; }
.dot-prev { fill: var(--chart-surface); stroke: var(--chart-prev); stroke-width: 2; }

.band { fill: var(--chart-band-alt); }
.band-hi { fill: var(--chart-band); }
.row-active { fill: var(--chart-band); }
.hit { fill: none; pointer-events: all; }

.tick {
  font-size: var(--fs-xs);
  fill: var(--muted);
  font-variant-numeric: tabular-nums;
}
.label { font-size: var(--fs-sm); fill: var(--text); }
.value { font-size: var(--fs-sm); fill: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.chart-tip {
  position: absolute;
  left: 0;
  top: 0;
  translate: calc(var(--tip-x, 0px) - 50%) calc(var(--tip-y, 0px) - 100% - 8px);
  z-index: 2;
  padding: var(--sp-1) var(--sp-2);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  white-space: nowrap;
  pointer-events: none;
}
.chart-tip[hidden] { display: none; }
.chart-tip .tip-label { color: var(--muted); }
.tip-key {
  display: inline-block;
  width: 14px;
  border-top: 2px solid currentColor;
  margin-right: 6px;
  vertical-align: middle;
}
.tip-current { border-top-color: var(--chart-current); }

.chart-panels {
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  gap: var(--sp-5) 16px;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  margin-bottom: var(--sp-1);
}
.panel-name { color: var(--text); font-weight: 600; }
.panel-latest { color: var(--muted); }

@media (forced-colors: active) {
  .bar,
  .marker,
  .edge-current,
  .line-current,
  .poly-current,
  .dot-current { fill: Highlight; stroke: Highlight; }
  .line-current { fill: none; }
  .dot-prev { fill: Canvas; stroke: CanvasText; }
  .grid,
  .axis,
  .crosshair,
  .mark-ref,
  .poly-prev { stroke: CanvasText; }
  .band { fill: Canvas; stroke: CanvasText; }
  .band-hi { fill: Highlight; }
  .row-active { fill: Highlight; }
  .chart-tip { background: Canvas; color: CanvasText; border-color: CanvasText; }
}

@media print {
  :root {
    --chart-surface: var(--surface);
    --chart-current: var(--text);
    --chart-prev: var(--text-2);
    --chart-ref: var(--muted);
    --chart-grid: var(--border);
    --chart-axis: var(--muted);
    --chart-band: var(--sunken);
    --chart-band-alt: var(--surface);
  }
  .chart-tip { display: none; }
  .chart { break-inside: avoid; }
}