/*
    Norges Bondelag (org 16) — komponentene stegene deler.

    Why this is a file in the shell rather than scoped CSS: Razor's CSS isolation scopes a `.cshtml.css`
    to that one view, and these four components appear across the NBL steps — the Om medlemskapet panel
    on Om deg, Preferanser and Oppsummering, the required-marker and the button row on all of them.
    Scoped files would mean four copies drifting apart.

    Everything is scoped under `.inn-body`, the new shell's root, so none of it can reach the legacy
    layout. Colours come from the semantic layer, which org 16's tokens in `Cust/16/16.css` already
    tint. The two literal colours are the design's own and are not brand colours of org 16: the locked
    alternative's grey, and the select chevron's stroke inside its data URI.

    Only NBL uses the `nbl-` prefix, so loading this for every tenant costs them nothing but the bytes.
*/

/* ------------------------------------------------------------------ the design's form primitives

    A step opts in with `nbl-skjema` on its root (Om deg and Om gården so far). Values are the design's
    (Innmelding.dc.html, kunde bondelaget), measured in plan.md 2026-10-15 §2.2–§2.3.

    (!) The selectors carry `.inn-shell .form-body` on purpose. forms.css styles every label and control
    from there, and a rule with fewer classes loses to it whatever the load order — which is how the Om
    medlemskapet labels never got their 700.

    Line heights are pixels because the design leaves them `normal`, and `normal` belongs to the font
    file: the design's Source Sans 3 gives 22 px at 16 px and 25 px at 18 px; the self-hosted Source
    Sans Pro does not.
*/
.inn-shell .form-body .nbl-tittel {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--c-fg);
}

.inn-shell .form-body .nbl-ingress {
    margin: 0 0 4px;
    font-size: 17px;
    line-height: 24px;
    color: var(--c-fg-muted);
}

.inn-shell .form-body .nbl-forklaring {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 22px;
    color: var(--c-fg-soft);
}

/* Om gården's line is the muted colour, Om deg's the soft one — the design has both. */
.inn-shell .form-body .nbl-forklaring--muted {
    color: var(--c-fg-muted);
}

.inn-shell .form-body .nbl-forklaring .nbl-obligatorisk {
    font-weight: 700;
}

.inn-shell .form-body .nbl-skjema .form-label {
    display: block;
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
}

/* 44 px stays the floor (forms.css); 9 + 24 + 9 + 2 lands on it exactly. */
.inn-shell .form-body .nbl-skjema .form-control,
.inn-shell .form-body .nbl-skjema .form-select {
    min-height: 44px;
    padding: 9px 12px;
    font-size: 17px;
    line-height: 24px;
    border-radius: var(--k-radius);
}

/* The design's own chevron, colour included. forms.css sets the `background` shorthand, which drops
   Bootstrap's chevron and resets the repeat — hence no-repeat here. */
.inn-shell .form-body .nbl-skjema .form-select {
    padding-right: 46px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M5 8.5l6 6 6-6' fill='none' stroke='%230c3a6b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 14px) 50%;
    background-size: 22px 22px;
}

.inn-shell .form-body .nbl-skjema .form-text {
    margin-top: 5px;
    font-size: 16px;
    line-height: 22px;
}

/*
    The step forms' own grids: 16 px between Om deg's blocks, 18 px between Om gården's.

    (!) Here and not in the views' scoped files. Razor CSS isolation gives a tag helper element no scope
    attribute, and every <form> is one (FormTagHelper), so `.nbl-omdeg` in Person.cshtml.css never matched
    in the running app and the gaps were lost.
*/
.inn-shell .form-body .nbl-omdeg {
    display: grid;
    gap: 16px;
}

.inn-shell .form-body .nbl-omgarden,
.inn-shell .form-body .nbl-interesser {
    display: grid;
    gap: 18px;
}

/* A group the design draws without a frame. */
.inn-shell .form-body .nbl-flat {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/*
    Visually hidden, still read. Om deg's help lines go this way (the design's skjulFeltHjelp) rather than
    display:none: they are aria-describedby targets, and the Poststed line is a live region that
    display:none would silence.
*/
.inn-shell .form-body .nbl-skjult,
.inn-shell .form-body .nbl-omdeg .form-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------ om gården

    Here rather than in Farm.cshtml.css because these are labels and controls, and forms.css reaches every
    label and control with more classes than a scoped rule has.
*/

/* A Ja/Nei question: a frameless group whose legend is the question. */
.inn-shell .form-body .nbl-produksjon {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.inn-shell .form-body .nbl-produksjon > legend {
    float: none;
    width: auto;
    margin: 0 0 8px;
    padding: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 25px;
}

/* The radios keep the browser's own margin (3 3 0 5 px) the design is drawn with; Reboot zeroes it. */
.inn-shell .form-body .nbl-radio {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: 0;
    font-size: 17px;
    font-weight: 400;
    line-height: 24px;
    cursor: pointer;
}

.inn-shell .form-body .nbl-radio input {
    width: 22px;
    height: 22px;
    flex: none;
    margin: 3px 3px 0 5px;
    accent-color: var(--c-primary);
}

/* The answers of one question side by side (Om gården, Interesser). */
.inn-shell .form-body .nbl-ja-nei {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
}

/* A checklist item: the whole row is the label, so the text is part of the 44 px target. */
.inn-shell .form-body .nbl-vare-valg {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: 0;
    font-size: 17px;
    font-weight: 400;
    line-height: 24px;
    cursor: pointer;
}

.inn-shell .form-body .nbl-vare-valg input {
    width: 20px;
    height: 20px;
    flex: none;
    margin: 3px 3px 3px 4px;
    accent-color: var(--c-primary);
}

/* The quantity beside a ticked item: narrower and tighter than a full field. */
.inn-shell .form-body .nbl-skjema .nbl-mengde .form-control {
    flex: none;
    width: 84px;
    padding: 8px 10px;
}

/* ------------------------------------------------------------------ om medlemskapet */

.inn-shell .form-body .nbl-medlemskap {
    min-width: 0;
    margin: 0;
    border: 1px solid var(--c-primary-soft-border);
    border-radius: var(--k-radius);
    background: var(--c-primary-tint);
    padding: 16px 18px;
}

/*
    (!) `float: none` is load-bearing, not tidying. Bootstrap Reboot sets `legend { float: left }`, and
    the `width: auto` below defeats the `width: 100%` that kept that float harmless — so the legend
    shrank to its text and the next element sat down beside it. That is how "Vilkår" came to share a line
    with the checkbox it was supposed to head. forms.css does exactly the same for `.inn-fieldgroup`, and
    for the same reason; this rule had simply never been given it.

    The negative margin and the side padding only make sense once the legend is back in flow: together
    they lift it onto the panel's top border, which is the look the rule was written for.
*/
/* Reboot's legend also has margin-bottom: .5rem; the design's has none, and the panel text sits 8 px
   higher for it. */
.inn-shell .form-body .nbl-medlemskap legend {
    float: none;
    width: auto;
    margin: 0 0 0 -8px;
    padding: 0 8px;
    font-size: 18px;
    font-weight: 700;
    line-height: 25px;
}

.inn-shell .form-body .nbl-medlemskap-tekst {
    margin: 0 0 14px;
    font-size: 17px;
    line-height: 1.55;
    color: var(--c-fg);
}

.inn-shell .form-body .nbl-medlemskap-org {
    margin: 0 0 8px;
    font-size: 17px;
    line-height: 1.5;
    color: var(--c-fg);
}

/* Reboot draws an hr in currentColor at a quarter opacity; the design's is the panel's border colour. */
.inn-shell .form-body .nbl-medlemskap hr {
    margin: 16px 0;
    border: 0;
    border-top: 1px solid var(--c-primary-soft-border);
    color: inherit;
    opacity: 1;
}

/* 44px minimum target, and the whole row is the label so the text is part of it. */
.inn-shell .form-body .nbl-avkrysning {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--c-fg);
    cursor: pointer;
}

/* The organisation boxes keep the design's `normal` line height (24 px at 17 px), which shows once a
   label wraps on a phone. */
.inn-shell .form-body .nbl-organisasjoner .nbl-avkrysning {
    line-height: 24px;
}

/* The design keeps the browser's own checkbox margin (3 3 3 4 px), which Reboot zeroes; the text
   position depends on it. */
.inn-shell .form-body .nbl-avkrysning input {
    width: 24px;
    height: 24px;
    flex: none;
    margin: 3px 3px 3px 4px;
    accent-color: var(--c-primary);
}

/*
    The locked alternative. Bondelaget asked for it to read as unavailable rather than merely be
    unclickable, so the state is carried by the struck text and the cursor as well as by aria-disabled,
    and never by colour alone. The control keeps its focus outline because it stays in the tab order:
    the step scripts set aria-disabled instead of the disabled attribute, so it is still announced.

    The grey and the pale box are the design's look for its `disabled` box (plan.md 2026-10-15, D17). A
    disabled control is exempt from the 4.5:1 text contrast (WCAG 1.4.3), and the strike-through says it
    without the colour.
*/
.inn-shell .form-body .nbl-avkrysning--last {
    color: #aaaaaa;
    text-decoration: line-through;
    cursor: not-allowed;
}

.inn-shell .form-body .nbl-avkrysning--last input {
    opacity: 0.4;
    cursor: not-allowed;
}

.inn-body .nbl-obligatorisk {
    color: var(--c-err);
}

/* ------------------------------------------------------------------ siste steg */

/* What happens after the applicant sends, said above the medlemsvilkår box. */
.inn-body .nbl-kontingent {
    color: var(--c-fg-muted);
    margin: 16px 0 0;
}

/* ------------------------------------------------------------------ oppsummering

    The design's `erKontroll` cards and `juridiskNederst` box (kunde bondelaget). Global rather than
    scoped: the edit link is a tag helper (`asp-action`), which Razor CSS isolation never stamps.
*/
.inn-shell .form-body .nbl-ingress--luft {
    margin-bottom: 16px;
}

.inn-shell .form-body .nbl-kortliste {
    display: grid;
    gap: 12px;
}

.inn-shell .form-body .nbl-kort {
    min-width: 0;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-bg);
    padding: 14px 18px;
}

.inn-shell .form-body .nbl-kort-topp {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.inn-shell .form-body .nbl-kort-tittel {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 25px;
    color: var(--c-fg);
}

/* `:not(.btn)` lifts the rule over base.css's link rule (0,3,1), which would underline the pill. */
.inn-shell .form-body a.nbl-endre:not(.btn) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 2px solid var(--c-primary);
    border-radius: 999px;
    background: var(--c-bg);
    color: var(--c-primary);
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    text-decoration: none;
}

.inn-shell .form-body a.nbl-endre:not(.btn):hover {
    background: var(--c-primary);
    color: var(--c-bg);
}

.inn-shell .form-body .nbl-endre i {
    font-size: 14px;
}

.inn-shell .form-body .nbl-kort-rader {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 10px 24px;
    margin: 0;
}

.inn-shell .form-body .nbl-kort-rader > div {
    min-width: 0;
}

.inn-shell .form-body .nbl-kort-rader dt {
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    color: var(--c-fg-muted);
}

.inn-shell .form-body .nbl-kort-rader dd {
    margin: 1px 0 0;
    font-size: 17px;
    line-height: 24px;
    color: var(--c-fg);
    overflow-wrap: anywhere;
}

.inn-shell .form-body .nbl-kort-rader dd.nbl-tom {
    color: var(--c-fg-soft);
}

.inn-shell .form-body .nbl-juridisk {
    display: grid;
    gap: 12px;
    margin-top: 20px;
    border: 1px solid var(--c-primary-soft-border);
    border-radius: 6px;
    background: var(--c-primary-tint);
    padding: 18px 20px;
}

.inn-shell .form-body .nbl-juridisk .nbl-kort-tittel {
    font-size: 19px;
}

.inn-shell .form-body .nbl-juridisk p {
    margin: 0;
    max-width: 80ch;
    font-size: 17px;
    line-height: 1.55;
    color: var(--c-fg);
}

.inn-shell .form-body .nbl-juridisk a {
    font-weight: 700;
}

.inn-shell .form-body .nbl-juridisk a i {
    margin-left: 6px;
    font-size: 13px;
}

.inn-shell .form-body .nbl-juridisk .nbl-juridisk-innsending {
    font-size: 16px;
    font-weight: 600;
}

.inn-body .nbl-knapperad {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

/* ------------------------------------------------------------------ kontingent

    The design's Kontingent box on Oppsummering (kunde bondelaget, `visFaktura`). The amounts never wrap and
    line up as tabular figures; the frame scrolls sideways before the page would on a very narrow screen.
*/
.inn-shell .form-body .nbl-kontingentboks {
    margin-top: 20px;
    border-top: 2px solid var(--c-fg);
    padding-top: 14px;
}

.inn-shell .form-body .nbl-kontingentboks .nbl-kort-tittel {
    margin-bottom: 2px;
    font-size: 19px;
}

.inn-shell .form-body .nbl-kontingent-under {
    margin: 0 0 14px;
    font-size: 16px;
    color: var(--c-fg-soft);
}

.inn-shell .form-body .nbl-kontingent-ramme {
    overflow-x: auto;
}

.inn-shell .form-body .nbl-kontingent-tabell {
    width: 100%;
    border-collapse: collapse;
    font-size: 17px;
    color: var(--c-fg);
}

.inn-shell .form-body .nbl-kontingent-tabell thead th,
.inn-shell .form-body .nbl-kontingent-tabell thead td {
    padding: 0 0 8px 16px;
    border-bottom: 1px solid var(--c-border);
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.inn-shell .form-body .nbl-kontingent-tabell tbody th {
    padding: 6px 0;
    font-weight: 400;
    text-align: left;
}

.inn-shell .form-body .nbl-kontingent-tabell tbody td {
    padding: 6px 0 6px 16px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.inn-shell .form-body .nbl-kontingent-tabell .nbl-k-overskrift th {
    padding: 16px 0 2px;
    font-weight: 700;
}

.inn-shell .form-body .nbl-kontingent-tabell .nbl-k-sum th,
.inn-shell .form-body .nbl-kontingent-tabell .nbl-k-sum td {
    padding-top: 10px;
    border-top: 1px solid var(--c-border);
    font-weight: 700;
}

.inn-shell .form-body .nbl-kontingent-tabell .nbl-k-total th,
.inn-shell .form-body .nbl-kontingent-tabell .nbl-k-total td {
    padding-top: 12px;
    border-top: 2px solid var(--c-fg);
    font-size: 19px;
    font-weight: 700;
}

/* On a phone the column headings wrap and the gaps narrow, so both amount columns fit without scrolling. */
@media (max-width: 759.98px) {
    .inn-shell .form-body .nbl-kontingent-tabell {
        font-size: 16px;
    }

    .inn-shell .form-body .nbl-kontingent-tabell thead th {
        white-space: normal;
    }

    .inn-shell .form-body .nbl-kontingent-tabell thead th,
    .inn-shell .form-body .nbl-kontingent-tabell tbody td {
        padding-left: 10px;
    }

    .inn-shell .form-body .nbl-kontingent-tabell .nbl-k-total th,
    .inn-shell .form-body .nbl-kontingent-tabell .nbl-k-total td {
        font-size: 17px;
    }
}

.inn-shell .form-body .nbl-kontingent-om {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.inn-shell .form-body .nbl-kontingent-om p {
    margin: 0;
    max-width: 80ch;
    font-size: 16px;
    color: var(--c-fg-soft);
}

/* ------------------------------------------------------------------ kvittering

    The design's receipt (kunde bondelaget): the green confirmation card and the contact card.
*/
.inn-shell .form-body .nbl-kvittering {
    display: grid;
    gap: 16px;
}

.inn-shell .form-body .nbl-kvittering-kort {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border: 1px solid var(--c-ok-border);
    border-radius: 10px;
    background: var(--c-ok-bg);
    padding: 22px 24px;
}

.inn-shell .form-body .nbl-kvittering-ikon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: var(--c-ok);
    color: var(--c-bg);
    font-size: 22px;
}

.inn-shell .form-body .nbl-kvittering-innhold {
    min-width: 0;
}

/* Sentence case, not the design's uppercase: whole words in capitals read worse (UU check). */
.inn-shell .form-body .nbl-kvittering-merke {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--c-ok);
}

.inn-shell .form-body .nbl-kvittering .nbl-tittel {
    margin-bottom: 8px;
}

.inn-shell .form-body .nbl-kvittering-tekst {
    max-width: 80ch;
    font-size: 17px;
    line-height: 1.6;
    color: var(--c-fg);
}

.inn-shell .form-body .nbl-kvittering-tekst p {
    margin: 0 0 8px;
}

.inn-shell .form-body .nbl-kvittering-tekst p:last-child {
    margin-bottom: 0;
}

.inn-shell .form-body .nbl-kvittering-kontakt {
    padding: 20px 22px;
}

.inn-shell .form-body .nbl-kvittering-kontakt .nbl-kort-tittel {
    margin-bottom: 10px;
}

/* `kvitteringUtenRef`: two columns as wide as their content, one column on a phone. */
.inn-shell .form-body .nbl-kvittering-kontakt .nbl-kort-rader {
    grid-template-columns: max-content max-content;
    gap: 10px 40px;
}

@media (max-width: 759.98px) {
    .inn-shell .form-body .nbl-kvittering-kontakt .nbl-kort-rader {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The design's phone heading (`h2Str`, below 760 px). */
@media (max-width: 759.98px) {
    .inn-shell .form-body .nbl-tittel {
        font-size: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .inn-body .nbl-avkrysning {
        transition: none;
    }
}