/*
 * components/latency-chart.css — interactive latency sparkline with a
 * cursor-tracking readout (dashboard grid: real-time health graph).
 *
 * Paired with static/js/components/latency-chart.js. The chart stretches
 * to fill its grid cell; a marker dot + vertical guide follow the pointer,
 * and a floating dark tooltip (appended to <body>) shows the exact latency
 * and clock time of the sample under the cursor. Token-driven (D5).
 */

.latency-chart {
  position: relative;
  display: block;
  width: 100%;
  height: 1.375rem;
  color: var(--color-success-fg);
  cursor: crosshair;
}

.latency-chart--empty {
  height: auto;
  cursor: default;
}

.latency-chart__svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Vertical guide following the nearest sample. */
.latency-chart__guide {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -0.5px;
  background: var(--color-fg-muted);
  opacity: 0.35;
  pointer-events: none;
}

/* Marker dot sitting on the line at the hovered sample. */
.latency-chart__dot {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: var(--radius-pill);
  background: currentColor;
  border: 1.5px solid var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-success-fg);
  pointer-events: none;
}

/* Shared floating readout (one element reused across all charts). */
.latency-chart__tooltip {
  position: absolute;
  z-index: var(--z-popover);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-fg);
  color: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  font-size: var(--fs-xs);
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}

.latency-chart__tooltip-val {
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.latency-chart__tooltip-time {
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}