/* Chart marks (per the mark specs: 2px line, ~10% area wash, hairline grid,
   surface-ringed end dot) and the horizontal bar list. */

.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .gridline { stroke: var(--grid); stroke-width: 1; }
.chart .axisline { stroke: var(--baseline); stroke-width: 1; }
.chart .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .series-line { stroke: var(--series); stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.chart .series-area { fill: var(--series-wash); }
.chart .end-dot { fill: var(--series); stroke: var(--surface); stroke-width: 2; }
.chart .crosshair { stroke: var(--baseline); stroke-width: 1; }
.chart-tip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow); padding: 7px 10px; font-size: 12px; white-space: nowrap;
}
.chart-tip .tt-date { color: var(--muted); }
.chart-tip .tt-val { font-weight: 600; }

.barlist { display: flex; flex-direction: column; gap: 10px; }
.barrow { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 10px; align-items: center; }
.barrow .b-name { font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barrow .b-track { display: flex; align-items: center; gap: 8px; min-width: 0; }
.barrow .b-fill { height: 14px; background: var(--series); border-radius: 0 4px 4px 0; min-width: 2px; }
.barrow .b-val { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }