/* ===== Charts (server SVG) =============================================== */
:root {
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --chart-grid: #e1e0d9; --chart-axis: #c3c2b7; --chart-tick: #6b6a65;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
    --chart-grid: #2c2c2a; --chart-axis: #383835; --chart-tick: #a3a29a;
  }
}
:root[data-theme="dark"] {
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
  --chart-grid: #2c2c2a; --chart-axis: #383835; --chart-tick: #a3a29a;
}

.chart { margin: 0; display: grid; gap: 8px; min-width: 0; }
.chart__title { font-weight: 650; font-size: var(--fs-md); }
.chart__scroll { position: relative; overflow-x: auto; }
.chart__svg { display: block; width: 100%; min-width: 520px; height: auto; overflow: visible; }
.chart__grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart__axis { stroke: var(--chart-axis); stroke-width: 1; }
.chart__tick { font-size: 11px; fill: var(--chart-tick); font-variant-numeric: tabular-nums; }
.chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__direct { font-size: 11px; font-weight: 600; fill: var(--ink-2); }
.chart__bar { stroke: var(--surface); stroke-width: 1; transition: opacity var(--dur) var(--ease); }
.chart__line.chart__s1 { stroke: var(--series-1); } .chart__bar.chart__s1 { fill: var(--series-1); }
.chart__line.chart__s2 { stroke: var(--series-2); } .chart__bar.chart__s2 { fill: var(--series-2); }
.chart__line.chart__s3 { stroke: var(--series-3); } .chart__bar.chart__s3 { fill: var(--series-3); }
.chart__line.chart__s4 { stroke: var(--series-4); } .chart__bar.chart__s4 { fill: var(--series-4); }
.chart__hit { fill: transparent; cursor: crosshair; }
.chart__hit:focus-visible { outline: none; stroke: var(--focus); stroke-width: 2; }
.chart__crosshair { stroke: var(--ink-3); stroke-width: 1; opacity: 0; pointer-events: none; }
.chart__crosshair.is-visible { opacity: 1; }
.chart__tooltip {
  position: absolute; top: 8px; z-index: 5; pointer-events: none;
  min-width: 150px; padding: 8px 10px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-2);
  font-size: var(--fs-xs);
}
.chart__tip-head { color: var(--ink-3); margin-bottom: 4px; font-weight: 600; }
.chart__tip-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.chart__tip-row strong { font-variant-numeric: tabular-nums; }
.chart__tip-row span:last-child { color: var(--ink-2); }
.chart__tip-key { width: 12px; height: 2px; border-radius: 1px; flex: none; }
.chart__tip-key.chart__s1, .chart__key.chart__s1 { background: var(--series-1); }
.chart__tip-key.chart__s2, .chart__key.chart__s2 { background: var(--series-2); }
.chart__tip-key.chart__s3, .chart__key.chart__s3 { background: var(--series-3); }
.chart__tip-key.chart__s4, .chart__key.chart__s4 { background: var(--series-4); }
.chart__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-xs); color: var(--ink-2); }
.chart__legend li { display: inline-flex; align-items: center; gap: 6px; }
.chart__key { display: inline-block; flex: none; }
.chart__key--line { width: 16px; height: 2px; border-radius: 1px; }
.chart__key--bar { width: 10px; height: 10px; border-radius: 2px; }
.chart__table > summary { cursor: pointer; font-size: var(--fs-xs); color: var(--accent-ink); min-height: 32px; display: inline-flex; align-items: center; }
.chart__table .table { margin-top: 8px; }
/* Daily balance (balance_chart): plan after today is dashed; below zero is
   tinted with the «over» status colour, always explained in text next to it. */
.chart__line--forecast { stroke-dasharray: 5 4; }
.chart__line--baseline { stroke: var(--chart-axis); stroke-width: 2; stroke-dasharray: 2 3; fill: none; }
.chart__below-zero { fill: var(--over-soft); stroke: none; }
.chart__today { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.chart__mark { stroke: var(--surface); stroke-width: 2; }
.chart__mark--in { fill: var(--fact); }
.chart__mark--out { fill: var(--over); }
.chart__tip-key--none { display: none; }
.chart__tip-key.chart__sbaseline, .chart__key.chart__sbaseline { background: var(--chart-axis); }

@media (forced-colors: active) {
  .chart__below-zero { fill: Mark; }
  .chart__line { stroke: CanvasText; }
  .chart__bar { fill: CanvasText; }
}