/* Shared, wordless completion indicator for single-page forms. */
.form-completion-bar {
    display: block;
    width: 100%;
    height: 4px;
    margin: 0 0 14px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.form-completion-bar__fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #15803d, #22c55e, #4ade80);
    box-shadow: 0 0 7px rgba(34, 197, 94, 0.28);
    transition: width 180ms ease-out, box-shadow 180ms ease-out;
}

.form-completion-bar.is-complete .form-completion-bar__fill {
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.62);
}

.form-completion-bar--flush {
    margin: 0;
    border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
    .form-completion-bar__fill {
        transition: none;
    }
}