/* Stage-plus-progress readout — the shared .opportunities-stage-progress component.
   Markup: shared/components/milestone_progress.html. Used in a bookings-table
   cell, on a board card, and in the opportunity detail stage band, so the same
   booking reads the same way everywhere. It is inline-flex and sizes to its
   host, so a table cell, a card, and the band each lay it out on their own. */
.opportunities-stage-progress {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
    max-width: 100%;
}
.opportunities-stage-progress__stage {
    /* Never shrink the stage name to feed the bar — the stage is the point of the
       readout, so the bar (which can grow/shrink) gives up space first. */
    flex: 0 0 auto;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.opportunities-stage-progress__bar {
    flex: 1 1 3rem;
    min-width: 2.5rem;
    height: 5px;
    border-radius: var(--radius-pill);
    background: var(--color-grey-200);
    overflow: hidden;
}
.opportunities-stage-progress__fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--color-action);
    transition: width .3s ease;
}
.opportunities-stage-progress__count {
    font-size: var(--font-size-xs);
    color: var(--color-grey-600);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}