#ot-feuser-app .step-button {
    background: none;
    border: none;
}

#ot-feuser-app .step-navigation li {
    list-style-type: none;
    float: left;
    margin: 0;
    padding: 0;
}

#ot-feuser-app .step-navigation .step-title {
    margin-left: 0.5em;
}

/* The active step is the one piece of this navigation that has to stand out, so it
   must not depend on --bs-primary: a site whose primary is a pale tint renders the
   current step as the least readable label on the page. Sites can point
   --ot-feuser-step-active-color at whatever carries their emphasis. */
#ot-feuser-app .step-item.active .step-title {
    color: var(--ot-feuser-step-active-color, var(--bs-primary));
    font-weight: bold;
}

#ot-feuser-app ol.step-list {
    display: block !important;
    overflow: hidden;
    padding: 0;
    line-height: 2rem;
    margin: 0 0 1em;
}

#ot-feuser-app .step-marker {
    width: 2em;
    font-weight: bold;
    display: inline-block;
}

#ot-feuser-app .step-marker i {
    color: green;
}

/* ---------------------------------------------------------------------------
 * Flatten the step navigation.
 *
 * The Vue component styles it as a row of 40px circles with the label stacked
 * underneath — a look that only appeared once the component stylesheet started
 * being loaded at all. What this package actually wants, and what it looked like
 * before, is the compact single line above: number, icon, label, chevron.
 *
 * These rules undo the circle rather than edit the component, so the component
 * keeps a sensible standalone default for anyone embedding it elsewhere.
 * ------------------------------------------------------------------------- */

#ot-feuser-app .step-button {
    flex-direction: row;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0 0.5rem 0 0;
}

#ot-feuser-app .step-label {
    flex-direction: row;
    align-items: baseline;
    gap: 0.35rem;
}

#ot-feuser-app .step-marker {
    height: auto;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: inherit;
    color: inherit;
}

/* The active and completed states paint the circle, which no longer exists. Only
   the label carries the state here. */
#ot-feuser-app .step-item.active .step-marker,
#ot-feuser-app .step-item.completed .step-marker,
#ot-feuser-app .step-item.has-error .step-marker {
    background: none;
    box-shadow: none;
    border: 0;
    color: inherit;
}

/* The component truncates labels at 100px and hides them below 992px — sensible
   for a circle row, wrong for a text line that is allowed to wrap. */
#ot-feuser-app .step-title {
    font-size: inherit;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

@media (max-width: 992px) {
    #ot-feuser-app .step-title {
        display: inline;
    }
}

/* The list wraps instead of scrolling sideways, so long step sets stay readable
   on narrow screens — this is why the items are floated above. */
#ot-feuser-app .step-navigation {
    overflow-x: visible;
}

#ot-feuser-app ol.step-list {
    min-width: 0;
}