/* Repeating people: the child and family-member rows.
   =========================================================================
   **Why this file exists.** Both repeaters had no styling of their own at all — six `col-md-2` columns
   in one flat row, which at desktop width gave every field about 150 px and pushed `Kjønn` onto a
   second line by itself (`Test-result` screenshot, 2026-08-24). Two further faults came from the same
   flatness: a two-line label such as "Land for mobilnummer" pushed its control ~24 px below every
   other control on the line, and consecutive children ran together with nothing separating them.

   The markup is now two rows inside one card per person — identity, then contact — which is the
   grouping the person step already uses ("Navn og fødsel" / "Kontaktinformasjon"), so the two steps
   read as one form.

   **Everything here is scoped to `.inn-shell`**, exactly like the rest of design2026. The two view
   components render under BOTH shells, so the Bootstrap grid classes in the markup carry the layout
   for legacy and these rules only refine it for the new one. Legacy gains a sensible two-row form and
   loses nothing. */

.inn-shell .inn-repeat-item {
    /* 10px and 1px border match .inn-fieldgroup above — a child card is a group of fields, and two
       different frame treatments on the same page would read as two different kinds of thing. */
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-bg);
}

.inn-shell .inn-repeat-item:last-child {
    margin-bottom: 0;
}

.inn-shell .inn-repeat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--c-divider);
}

.inn-shell .inn-repeat-title {
    font-weight: 700;
    /* Deliberately not a heading element. These are repeated form groups, not document sections, and
       injecting h4s per child would put "Barn 1, Barn 2, Barn 3" into the page outline between the
       step's own heading and whatever follows it. */
    font-size: 1rem;
    color: var(--c-fg);
}

/* The label above a control in a repeated row.
   ---------------------------------------------------------------------
   `min-height` is the fix for the misalignment: the columns are narrow enough that one label wraps
   while its neighbours do not, and without a floor the wrapped one drags its control down. Two lines
   of the label's own line-height, so a wrap costs nothing and a single line still reserves the space. */
.inn-shell .inn-repeat-item label {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
    line-height: 1.25;
    min-height: 2.5em;
}

/* The remove control sits in the card header rather than in the grid.
   ---------------------------------------------------------------------
   It acts on the whole person, not on a field, and a `col-md-1` at the end of a row said the
   opposite — it looked like one more input, and it was the only column whose width changed between
   the edit and control steps. */
.inn-shell .inn-repeat-remove {
    flex: none;
}

@media (max-width: 767.98px) {
    .inn-shell .inn-repeat-item {
        padding: 12px 14px;
    }

    /* Every field is full width below md, so the reserved two-line label height is dead space. */
    .inn-shell .inn-repeat-item label {
        min-height: 0;
    }
}