/* Completion status indicator + stats card used on toolbox schedule
   index rows and show page. Displays an understood/discussion/pending
   breakdown as a coloured progress bar with dot-and-count chips. */

.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;
}

/* Compact variant used in list rows as a popover trigger. */
.completion-stats__bar--compact {
  block-size: 6px;
  cursor: help;
  inline-size: 100px;
}

.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__chip--spaced {
  gap: 0.5rem;
  justify-content: space-between;
}

.completion-stats__chip-label {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

.completion-stats__dot {
  background-color: var(--dot-color, var(--color-border-dark));
  block-size: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  inline-size: 8px;
}

.completion-stats__total {
  align-items: center;
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  margin-block-start: var(--size-1);
  padding-block-start: var(--size-1);
}

.completion-stats__popover {
  --popover-size: 14rem;
  padding: var(--size-2);
}

.completion-stats__popover-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}