/* Shared progress-bar component used by the Explore sidebar (mission, badges, neighborhood), the mission-complete
   modal, and the Validate tools. A rounded track holds either a single fill or two flush color segments (the
   community's audited share, then the current user's), optionally followed by a label. The fill color is the shared
   pine green. The block is prefixed `ps-` to avoid colliding with Bootstrap's global .progress-bar class. */
.ps-progress-bar {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ui-scale));
}

.ps-progress-bar__track {
  position: relative;
  flex: 1 1 auto;
  height: var(--ps-progress-bar-height, calc(12px * var(--ui-scale)));
  background: var(--color-neutral-200);
  border-radius: calc(6px * var(--ui-scale));
  overflow: hidden;
}

.ps-progress-bar__fill {
  height: 100%;
  width: 0;
  background: var(--color-pine-600);
  border-radius: inherit;
  transition: width 0.3s ease;
}

/* Segmented fill: a rounded pill, sized to the total audited fraction, that clips its two flush segments so they
   stay square and meet without a seam. The pill itself rounds the leading edge that sits mid-track. */
.ps-progress-bar__fill--segmented {
  display: flex;
  overflow: hidden;
  background: none;
}

.ps-progress-bar__segment {
  height: 100%;
  width: 0;
  background: var(--color-pine-600);
  transition: width 0.3s ease;
}

.ps-progress-bar__segment--you {
  background: var(--color-pine-700);
}

.ps-progress-bar__label {
  font: var(--text-caption-semibold);
  white-space: nowrap;
}