/* ============================================================
   SEGMENTED PROGRESS BAR — Nothing-style instrument viz
   ============================================================ */

.segbar {
  display: flex;
  gap: 2px;
  height: 14px;
}

.segbar > i {
  flex: 1;
  background: var(--color-border);   /* every bar is grey by default */
  border-radius: 0;
  display: block;
  position: relative;
  overflow: hidden;
}

/* Active fill is a coloured overlay (::before) so the grey base
   stays full-length while only the colour fades in via opacity. */
.segbar > i.is-on::before,
.segbar > i.is-peak::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 1;     /* default: fully on; animations may override */
}
.segbar > i.is-on::before   { background: var(--color-mint); }
.segbar > i.is-peak::before { background: var(--color-mint-deep); }

/* Optional sizes */
.segbar--lg { height: 20px; }
.segbar--sm { height: 8px; }

/* Bar with 0/1.0 endpoint labels */
.segbar-block__caps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}