/* Platform-wide stage-track component (booking page redesign, 2026-10-03).
   The one bold thing in a record header: the stage name, a row of segments
   (one per pipeline stage, filled through the current one), then the next step
   in small muted words. The fill is the current stage's own color when the
   template passes one (--stage-track-fill on the element), else the token for an
   active milestone. As a button it opens the record's pipeline. On a phone it
   goes full width and is a full-height tap target. Tokens only. */

.global-stage-track {
    --stage-track-fill: var(--ms-active);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-xs);
    min-width: 0;
    margin: 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: var(--color-text);
    font: inherit;
    text-align: left;
}

button.global-stage-track {
    cursor: pointer;
}

button.global-stage-track:hover {
    background: var(--color-grey-50);
}

button.global-stage-track:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.global-stage-track__label {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-heading);
    font-size: var(--font-size-md);
    line-height: var(--line-height-heading);
}

.global-stage-track__segs {
    display: flex;
    gap: var(--spacing-2xs);
}

.global-stage-track__seg {
    flex: 1 1 var(--spacing-lg);
    height: var(--spacing-xs);
    border-radius: var(--radius-pill);
}

.global-stage-track__seg--todo {
    background: var(--ms-pending);
}

.global-stage-track__seg--done,
.global-stage-track__seg--current {
    background: var(--stage-track-fill);
}

.global-stage-track__next {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 767.98px) {
    .global-stage-track {
        width: 100%;
        min-height: var(--control-h-touch);
        padding: var(--spacing-xs) 0;
    }
}