.usage_chart {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.usage_chart__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;

  /* base.css strokes every svg for inline icons; chart marks draw their own. */
  stroke: none;
}

.usage_chart__plot {
  min-height: 12rem;
}

.usage_chart__tooltip {
  position: absolute;
  z-index: var(--z-dropdown);
  min-width: 11rem;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-raised);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  font-size: var(--text-xs);
  pointer-events: none;
}

.usage_chart__tip_title {
  margin-bottom: var(--space-1);
  font-weight: var(--weight-semibold);
}

.usage_chart__tip_row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
}

.usage_chart__tip_value {
  margin-left: auto;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.usage_chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.usage_chart__key {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.usage_chart__swatch {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-full);
  background-color: var(--series-color);
}

.usage_chart__swatch--line {
  --series-color: var(--color-chart-line);

  width: 1rem;
  height: 2px;
}

.usage_chart__swatch--included {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--color-surface) 0 1.5px,
    transparent 1.5px 3.5px
  );
}

.usage_chart__grid {
  stroke: var(--color-chart-grid);
  stroke-width: 1;
}

.usage_chart__axis {
  stroke: var(--color-chart-axis);
  stroke-width: 1;
}

.usage_chart__tick,
.usage_chart__month,
.usage_chart__note {
  fill: var(--color-text-subtle);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
}

.usage_chart__tick {
  text-anchor: end;
}

.usage_chart__month,
.usage_chart__note,
.usage_chart__value {
  text-anchor: middle;
}

.usage_chart__value {
  fill: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.usage_chart__value--end {
  text-anchor: start;
}

.usage_chart__hit {
  fill: transparent;
}

.usage_chart__column:hover .usage_chart__hit {
  fill: var(--color-surface-hover);
}

.usage_chart__bar {
  fill: var(--series-color);
}

.usage_chart__bar--partial {
  opacity: var(--opacity-partial);
}

.usage_chart__line {
  fill: none;
  stroke: var(--color-chart-line);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.usage_chart__dot {
  fill: var(--color-chart-line);
  stroke: var(--color-surface);
  stroke-width: 2;
}

.usage_chart__hatch_wash {
  fill: var(--series-color);
  fill-opacity: var(--opacity-wash);
}

.usage_chart__hatch_line {
  stroke: var(--series-color);
  stroke-width: 2;
}

.usage_chart__series--first {
  --series-color: var(--color-series-first);
}

.usage_chart__series--second {
  --series-color: var(--color-series-second);
}

.usage_chart__series--third {
  --series-color: var(--color-series-third);
}

.usage_chart__series--fourth {
  --series-color: var(--color-series-fourth);
}

.usage_chart__series--fifth {
  --series-color: var(--color-series-fifth);
}

.usage_chart__series--sixth {
  --series-color: var(--color-series-sixth);
}

.usage_chart__series--seventh {
  --series-color: var(--color-series-seventh);
}

.usage_chart__series--eighth {
  --series-color: var(--color-series-eighth);
}

.usage_chart__series--other {
  --series-color: var(--color-series-other);
}

.usage_chart__series--gain {
  --series-color: var(--color-chart-gain);
}

.usage_chart__series--loss {
  --series-color: var(--color-chart-loss);
}