/* =========================
   Onboarding Progress (connectors + animated current link)
   Markup (what _Progress.cshtml should output):
   <div id="onboarding-progress" class="ob-track" style="--steps:N">
     <div class="ob-track__dots">
       <div class="ob-cell [is-linked|is-anim]"><button class="ob-dot [ob-done|ob-active]"></button></div>
       ... repeat N times ...
     </div>
     <div class="ob-track__labels">
       <div class="ob-label [ob-done|ob-active]">Register</div>
       ... repeat N times ...
     </div>
   </div>
   – For each cell i:
     • past (i < idx):   .ob-dot.ob-done   and .ob-cell.is-linked
     • current (i = idx): .ob-dot.ob-active and .ob-cell.is-anim (if i>0)
     • future (i > idx): plain
   ========================= */

#onboarding-progress.ob-track {
    --steps: var(--steps, 6);
    --dot: 24px; /* visual diameter including 2px border */
    --track: 4px; /* connector thickness */
    --c-base: #e9eef5; /* grey connector */
    --c-active: #0d6efd; /* active blue */
    --c-active-2: #6ea8fe; /* gradient tail */
    --c-muted: #b9c6d6; /* dot border (idle) */
    position: relative;
    width: 100%;
    padding-top: .25rem;
}

/* ---------- DOTS ROW (labels are the layout anchor; dots mirror that grid) ---------- */
.ob-track__dots {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--steps), 1fr);
    align-items: center; /* centers dots vertically */
    height: var(--dot); /* defines vertical center for connectors */
    margin-bottom: .25rem;
}

.ob-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* Base connector (grey) from previous center -> this center (skip first) */
    .ob-cell:not(:first-child)::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -50%; /* start at previous cell center */
        width: 100%; /* span to this cell center */
        height: var(--track);
        transform: translateY(-50%);
        background: var(--c-base);
        border-radius: 999px;
        pointer-events: none;
        z-index: 0;
    }

    /* Past connectors: fully filled, no animation */
    .ob-cell.is-linked::after {
        content: "";
        position: absolute;
        top: 50%;
        left: -50%;
        width: 100%;
        height: var(--track);
        transform: translateY(-50%);
        background: linear-gradient(90deg, var(--c-active), var(--c-active-2));
        border-radius: 999px;
        pointer-events: none;
        z-index: 0;
    }

    /* Current connector (prev -> current): animate left->right on insert */
    .ob-cell.is-anim::after {
        content: "";
        position: absolute;
        top: 50%;
        left: -50%;
        width: 100%;
        height: var(--track);
        /* animate scaleX from 0 to 1 while keeping Y centering */
        transform-origin: left center;
        animation: onbLinkFill .5s ease forwards;
        background: linear-gradient(90deg, var(--c-active), var(--c-active-2));
        border-radius: 999px;
        pointer-events: none;
        z-index: 0;
    }

@keyframes onbLinkFill {
    from {
        transform: translateY(-50%) scaleX(0);
    }

    to {
        transform: translateY(-50%) scaleX(1);
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ob-cell.is-anim::after {
        animation: none;
        transform: translateY(-50%) scaleX(1);
    }
}

/* ---------- DOTS ---------- */
.ob-dot {
    box-sizing: border-box; /* include border in size */
    width: var(--dot);
    height: var(--dot);
    border-radius: 50%;
    border: 2px solid var(--c-muted);
    background: #fff;
    position: relative;
    z-index: 1; /* above connectors */
    box-shadow: 0 1px 2px rgba(16,24,40,.06);
    cursor: default;
}

    .ob-dot.ob-done {
        border-color: var(--c-active);
        background: var(--c-active);
        color: #fff;
        box-shadow: 0 0 0 4px rgba(13,110,253,.10);
    }

        .ob-dot.ob-done::after {
            content: "✓";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -56%);
            font-weight: 700;
            font-size: .9rem;
            color: #fff;
        }

    .ob-dot.ob-active {
        border-color: var(--c-active);
        background: #fff;
        box-shadow: 0 0 0 6px rgba(13,110,253,.12);
        animation: obPulse 2s ease-in-out infinite;
    }

@keyframes obPulse {
    0% {
        box-shadow: 0 0 0 6px rgba(13,110,253,.12);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(13,110,253,.05);
    }

    100% {
        box-shadow: 0 0 0 6px rgba(13,110,253,.12);
    }
}

/* ---------- LABELS (anchor grid) ---------- */
.ob-track__labels {
    display: grid;
    grid-template-columns: repeat(var(--steps), 1fr);
    margin-top: .45rem;
    color: #6b7280;
    text-align: center;
}

.ob-label {
    justify-self: center;
    line-height: 1.2;
    max-width: clamp(8ch, 14ch, 18vw);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .ob-label.ob-active {
        color: #111827;
        font-weight: 600;
    }

    .ob-label.ob-done {
        color: #374151;
    }

@media (max-width: 420px) {
    .ob-track__labels {
        display: none;
    }
}