/* 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;
}