/* ─── SVG Gauge ───────────────────────────────────────────── */
.gauge-wrap {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.gauge-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Track (background arc) */
.gauge-track {
  fill: none;
  stroke: var(--border);
  stroke-width: 10;
  stroke-linecap: round;
}

/* Tick marks */
.gauge-tick {
  stroke: var(--muted);
  stroke-width: 1.5;
}

.gauge-tick-major {
  stroke: var(--muted);
  stroke-width: 2;
}

/* Progress arc (the glowing fill) */
.gauge-progress {
  fill: none;
  stroke: var(--accent);
  stroke-width: 10;
  stroke-linecap: round;
  transition: none; /* animated via JS requestAnimationFrame */
}

/* Glow duplicate of progress arc */
.gauge-glow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 16;
  stroke-linecap: round;
  opacity: 0.2;
}

/* Needle line */
.gauge-needle-line {
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* Needle glowing tip */
.gauge-needle-tip {
  fill: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent));
}

/* Center pivot */
.gauge-pivot {
  fill: var(--surface2);
  stroke: var(--accent);
  stroke-width: 1.5;
}

/* Min/max labels at arc endpoints */
.gauge-minmax {
  fill: var(--text-faint);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 300;
}

/* Phase label (ping / download / upload) */
.gauge-phase-label {
  fill: var(--text-dim);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: lowercase;
}

/* Big value number */
.gauge-value {
  fill: var(--text);
  font-family: var(--mono);
  font-size: 68px;
  font-weight: 300;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* Unit below value */
.gauge-unit {
  fill: var(--text-dim);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.15em;
}

/* Tick labels */
.gauge-tick-label {
  fill: var(--text-faint);
  font-family: var(--mono);
  font-size: 11px;
}

/* Phase transition: fade the gauge in when switching phase */
@keyframes gauge-phase-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

.gauge-phase-enter {
  animation: gauge-phase-in 0.35s var(--ease-out) both;
}