/* --------------------------------------------------------------------------
   Stepper — from the prototype (Innmelding.dc.html:78-105), rendered by
   StepsShellViewComponent. Every colour resolves from --k-brand or a neutral token, so the
   stepper follows the tenant with no per-tenant rule anywhere in this file.

   The desktop track and the mobile progressbar are both always in the DOM and swapped by the
   760 px media query at the bottom of this file. That is the prototype's own split, and it is
   what stops five step labels from being squeezed into a phone width (finding F28).
   -------------------------------------------------------------------------- */
.inn-shell .inn-steps {
    padding: 14px var(--k-pad-side);
    border-bottom: 1px solid var(--c-divider);
}

.inn-shell .steps-container {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* `flex: 1` is what the legacy component did with an inline `style="width:{100/n}%"`. Doing it
   here means no arithmetic in Razor and no inline style, and `min-width: 0` is what lets a long
   step name shrink instead of forcing the row wider than the shell. */
.inn-shell .inn-step {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
}

.inn-shell .inn-step-track {
    display: flex;
    align-items: center;
    width: 100%;
}

.inn-shell .inn-step-line {
    height: 2px;
    flex: 1;
    border-radius: 2px;
    background: var(--c-ghost);
}

/* The first step's left line and the last step's right line, so the track begins and ends at a
   circle instead of trailing into the padding. */
.inn-shell .inn-step-line--edge {
    background: transparent;
}

.inn-shell .inn-step-mark {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    background: var(--c-bg);
    color: var(--c-fg-muted);
    border: 2px solid var(--c-border-strong);
}

/* The bottom line is on every step, transparent unless the step is current. Keeping the width
   constant is the point: a line that appeared only on the current step would shift every label
   by 3 px each time the user advanced. */
.inn-shell .inn-step-label {
    font-size: 1rem;
    font-weight: 400;
    color: var(--c-fg-muted);
    text-align: center;
    padding: 1px 6px 4px;
    border-bottom: 3px solid transparent;
    overflow-wrap: anywhere;
}

/* ---- completed and current both carry the tenant colour ---- */
.inn-shell .inn-step--done .inn-step-mark,
.inn-shell .inn-step--current .inn-step-mark {
    background: var(--k-brand);
    color: #ffffff;
    border-color: var(--k-brand);
}

.inn-shell .inn-step--done .inn-step-line--left,
.inn-shell .inn-step--current .inn-step-line--left,
.inn-shell .inn-step--done .inn-step-line--right {
    background: var(--k-brand);
}

.inn-shell .inn-step-line--edge,
.inn-shell .inn-step--done .inn-step-line--edge,
.inn-shell .inn-step--current .inn-step-line--edge {
    background: transparent;
}

/* ---- only the current step is emphasised ---- */
.inn-shell .inn-step--current .inn-step-label {
    font-weight: 700;
    color: var(--c-fg);
    border-bottom-color: var(--k-brand);
}

/* ---- mobile progressbar ---- */
.inn-shell .inn-steps-mobile {
    display: none;
    padding: 14px var(--k-pad-side);
    border-bottom: 1px solid var(--c-divider);
}

.inn-shell .inn-steps-mobile-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 8px;
    font-size: 1rem;
    color: var(--c-fg-muted);
}

.inn-shell .inn-steps-mobile-name {
    font-weight: 700;
    color: var(--c-fg);
}

.inn-shell .inn-progress {
    height: 8px;
    border-radius: 999px;
    background: var(--c-ghost);
    overflow: hidden;
}

/* --inn-progress is set by innmelding-design.js from `data-inn-progress`. Absent, the fill is
   simply zero-width and the "Steg N av M" text above still carries the value. */
.inn-shell .inn-progress-fill {
    display: block;
    height: 100%;
    width: var(--inn-progress, 0%);
    border-radius: 999px;
    background: var(--k-brand);
}

/* Screen-reader-only step status. Not `display: none`, which would remove it from the
   accessibility tree — the whole point is that it IS announced. */
.inn-body .inn-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Finding F28. StepsViewComponent wraps the stepper in Bootstrap's `.mx-auto`, i.e.
   `margin-left/right: auto`. In this column flex container the horizontal axis is the CROSS
   axis, where auto margins make a flex item shrink to its content and centre instead of
   stretching — so the wrapper collapsed to 51 px on the one-step Start page and 377 px inside
   a 1280 px shell on a five-step page. Each <li> then got its inline `width: 100/n%` of that
   collapsed width (68 px) while the Norwegian labels need 49-91 px, and adjacent labels
   overlapped by up to 24 px. Legacy is unaffected: its container is not a flex column.

   Restoring an explicit width leaves the auto margins no free space to absorb, so the wrapper
   stretches and the component's own `max-width: 1600px` stays in charge of the upper bound.
   This is a compatibility shim for a component Phase 3 owns, not a redesign of the stepper: a
   horizontal five-label stepper still cannot fit 375 px, which is what the mobile progressbar
   in Phase 3 is for. */
.inn-shell > .mx-auto {
    width: 100%;
}