/* --------------------------------------------------------------------------
   Action area — rendered by NavigationShellViewComponent, which owns the
   .fixed-bottom-navigation tenant hook.

   Colours come from the tokens, so the primary action follows the tenant like everything else.

   **The prototype has TWO action areas, and this block used to copy the wrong one at every width.**
   `Innmelding.dc.html` renders `navInline` (lines 1036-1046) when the bar sits in the page and
   `navFixed` (lines 1063-1072) when it is pinned to the bottom of a phone screen, and they are
   deliberately different controls:

       navInline (desktop)   Tilbake  min-height:44px  padding:0 22px  no flex
                             spacer   flex:1
                             Neste    min-height:44px  padding:0 26px  flex:none
       navFixed  (mobile)    Tilbake  min-height:52px  padding:0 20px  flex:none
                             Neste    min-height:52px  padding:0 20px  flex:1

   Only `navFixed` was implemented, so `Neste` stretched to fill the row on a 1440 px desktop — the
   defect in Test-result/test4.png, where the running page shows a full-width blue bar against a
   compact right-aligned button on the canvas. The base rules below are now `navInline` and the
   `max-width: 760px` block restores `navFixed`, which is the same breakpoint at which the bar
   becomes `position: sticky`. So the two variants switch together, as the prototype intends.

   `margin-left: auto` on the primary replaces the prototype's empty spacer `<div>`: same result,
   one less element, and it right-aligns `Neste` on the Start step where there is no `Tilbake` —
   which is what the spacer does there too.
   -------------------------------------------------------------------------- */
.inn-shell .fixed-bottom-navigation {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px var(--k-pad-side);
    background: var(--c-bg);
    border-top: 1px solid var(--c-border);
}

/* 44 px is the prototype's in-flow target height, and it is a touch-target size rather than styling:
   these are the two controls a visitor presses on every step. It grows to the prototype's 52 px in
   the `max-width: 760px` block, where the bar turns sticky and a thumb is doing the pressing. Both
   numbers clear WCAG 2.2 AA target size (2.5.8, 24x24 CSS px) with room to spare. */
.inn-shell .inn-action {
    min-height: 44px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 7px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

/* Back is secondary: bordered, on the page background. `flex: none` keeps it to its content so the
   primary action gets the rest of the row. */
.inn-shell .inn-action--back {
    flex: none;
    border: 2px solid var(--c-border-strong);
    background: var(--c-bg);
    color: var(--c-fg);
}

/* `flex: none` plus `margin-left: auto` is the prototype's `navInline` primary: it stays the width of
   its own label and sits hard against the right edge of the row. The `max-width: 760px` block swaps
   in `flex: 1` for the phone, where a full-width target is the point. */
.inn-shell .inn-action--primary {
    flex: none;
    margin-left: auto;
    padding: 0 26px;
    white-space: nowrap;
    border: 1px solid var(--k-brand);
    background: var(--k-brand);
    color: #ffffff;
}

.inn-shell .inn-action-icon {
    flex: none;
}