.bandbar {
  position: relative;
  display: flex;
  width: 100%;
  border-radius: 999px;
  overflow: visible;
}

.bandbar.vertical {
  flex-direction: column-reverse;
  height: 100%;
  width: 6px;
}

.bandbar-seg:first-child { border-radius: 999px 0 0 999px; }
.bandbar-seg:last-child { border-radius: 0 999px 999px 0; }
.bandbar.vertical .bandbar-seg:first-child { border-radius: 0 0 999px 999px; }
.bandbar.vertical .bandbar-seg:last-child { border-radius: 999px 999px 0 0; }

.bandbar-seg {
  height: 100%;
  /* Bands are muted so the marker, not the track, is what the eye lands on. */
  opacity: 0.42;
}

.bandbar.vertical .bandbar-seg {
  width: 100%;
  height: auto;
}

.tone-good { background: var(--status-good); }
.tone-warning { background: var(--status-warning); }
.tone-serious { background: var(--status-serious); }
.tone-critical { background: var(--status-critical); }

/* A 2px surface ring keeps the marker legible wherever it lands. */
.bandbar-marker {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-primary);
  border: 2px solid var(--surface-1);
  transform: translate(-50%, -50%);
  transition: left 0.9s var(--ease), bottom 0.9s var(--ease);
}

.bandbar.vertical .bandbar-marker {
  top: auto;
  left: 50%;
  transform: translate(-50%, 50%);
}

@media (prefers-reduced-motion: reduce) {
  .bandbar-marker { transition: none; }
}