/* Completion stats card on the toolbox delivery show page (and its sign-off
   Turbo replacement). Displays an understood/pending breakdown as a coloured
   progress bar with dot-and-count chips. The bar is a div filled to an inline
   `--fill` percentage, not css-zero's `progress`, which styles a native
   `<progress>` element. */

.completion-stats {
  display: flex;
  align-items: center;
  gap: var(--size-6);
  flex-wrap: wrap;
}

.completion-stats__group {
  display: flex;
  align-items: center;
  gap: var(--size-3);
  flex-shrink: 0;
}

.completion-stats__bar {
  background-color: var(--color-border);
  block-size: 8px;
  border-radius: 999px;
  inline-size: 240px;
  overflow: hidden;
}

.completion-stats__bar-fill {
  background-color: var(--color-primary);
  block-size: 100%;
  inline-size: var(--fill, 0%);
}

.completion-stats__divider {
  align-self: stretch;
  background-color: var(--color-border);
  inline-size: 1px;
}

.completion-stats__chip {
  align-items: center;
  display: flex;
  gap: var(--size-2);
}

.completion-stats__dot {
  block-size: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  inline-size: 8px;
}

.completion-stats__dot--green {
  background-color: var(--color-text-green);
}

.completion-stats__dot--muted {
  background-color: var(--color-border-dark);
}