/* Charts: the canvas host, the legend and the tooltip. */

.chart-host { position: relative; height: 240px; }
.chart-host.tall { height: 340px; }
.chart-host canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.chart-host .empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }

.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12px; }
.legend button { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; color: var(--muted); padding: 0; }
.legend button.off { opacity: 0.35; text-decoration: line-through; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  box-shadow: 0 8px 24px var(--shadow);
  z-index: 5;
  white-space: nowrap;
}
.tooltip .time { color: var(--muted); margin-bottom: 4px; }
.tooltip .row { display: flex; align-items: center; gap: 6px; }
.tooltip .row i { width: 8px; height: 8px; border-radius: 2px; }
.tooltip .row b { margin-left: auto; padding-left: 14px; font-variant-numeric: tabular-nums; }

.meta { margin-top: 8px; color: var(--muted); font-size: 11px; font-family: var(--mono); }