.bx .stepper { display: flex; align-items: center; gap: 6px; }
.bx .stepper .step { width: 6px; height: 6px; border-radius: var(--bx-r-pill); background: var(--bx-line-2); }
.bx .stepper .step.on { background: var(--bido-cyan); width: 18px; }

/* Progress bar — one fill contract: the fill width is driven by --progress
   (set on .prog or its <i>). .prog-flat swaps the brand gradient for a flat
   accent fill; it is a variant, never an inline-width override. */
.bx .prog { height: 8px; background: var(--bx-paper-3); border-radius: var(--bx-r-pill); overflow: hidden; }
.bx-dark .prog { background: rgba(var(--bx-white-rgb),0.06); }
.bx .prog > i { display: block; width: var(--progress, auto); height: 100%; background: var(--bx-grad-brand); border-radius: var(--bx-r-pill); }
.bx .prog.prog-flat > i { background: var(--bx-accent); }

.bx kbd {
  font-family: var(--bx-font-mono); font-size: var(--bx-text-2xs);
  background: var(--bx-paper-2); border: 1px solid var(--bx-line);
  padding: 1px 5px; border-radius: var(--bx-r-sm); color: var(--bx-ink-3);
}

.bido-status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: var(--bx-text-md);
}

.bido-status-line .label {
  flex: 1;
}

.bido-status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--bx-r-pill);
  background: var(--bido-status-color, var(--bx-good));
}

.bido-status-dot.warn { --bido-status-color: var(--bx-warn); }
.bido-status-dot.bad { --bido-status-color: var(--bx-bad); }