.metrics-summary-note {
  margin: -14px 0 28px;
  color: var(--muted);
  font: 11px/1.7 "IBM Plex Mono", monospace;
}

.metrics-summary-note strong {
  color: var(--cyan);
  font-weight: 500;
}

.metrics-legend {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  padding: 18px 20px 4px;
  color: var(--muted);
  font: 11px "IBM Plex Mono", monospace;
}

.metrics-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.metrics-legend span::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--acid);
  box-shadow: 0 0 14px #d9ff4340;
}

.metrics-legend .webhook::before {
  background: var(--cyan);
  box-shadow: 0 0 14px #52e6d540;
}

.metrics-legend .socket::before {
  background: var(--amber);
  box-shadow: 0 0 14px #ffb84d40;
}

.metrics-chart {
  padding: 8px 20px 24px;
  overflow-x: auto;
}

.metrics-chart svg {
  display: block;
  width: 100%;
  min-width: 720px;
  height: 340px;
}

.metrics-grid-line {
  stroke: #343a3470;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.metrics-axis-label {
  fill: var(--muted);
  font: 10px "IBM Plex Mono", monospace;
}

.metrics-bar {
  fill: var(--acid);
  opacity: .82;
  transition: opacity .15s;
}

.metrics-bar.webhook {
  fill: var(--cyan);
}

.metrics-bar.socket {
  fill: var(--amber);
}

.metrics-bar:hover {
  opacity: 1;
}

.metrics-chart-frame {
  fill: #0f121080;
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

@media (max-width: 640px) {
  .metrics-chart {
    padding-inline: 10px;
  }

  .metrics-legend {
    gap: 12px;
  }
}