/* --------------------------------------------------------------------------
   Form primitives — master-plan Phase 4 task 1, scoped to the new shell.

   These attach to the markup the flow views and tag helpers ALREADY emit, so no view changes and
   no new classes. Inventoried before writing, rather than assumed:

     - Labels are bare <label> elements. `LabelFieldsTagHelper` sets `for`, fills the display name
       and appends `<span class="redStar">*</span>` when the field is required — only one view in
       the whole tree uses Bootstrap's `.form-label`, so styling that class alone would have missed
       almost every label.
     - `asp-validation-for` is used 75 times, so inline errors arrive as
       `.field-validation-valid` flipping to `.field-validation-error`, and jQuery-unobtrusive adds
       `.input-validation-error` to the field itself.
     - `Validation.css` styles only two blink animations and `.redStar`; it has no field-error
       styling at all, so nothing here overrides existing work.
     - `asp-validation-summary` appears ZERO times, so nothing is styled for ASP.NET's own
       `.validation-summary-errors` — that would dress markup no view renders (finding F38). Phase 4B
       task 3 added the shell's own `_ValidationSummaryNew.cshtml` instead, which is why
       `.inn-validation-summary` below IS styled.
   -------------------------------------------------------------------------- */
/* Validation summary (finding F38). It is the first thing in the form body on a rejected POST, and
   innmelding-design.js moves focus to it. The error colour and the border are two signals, and the
   list itself is a third — the count in the title tells the visitor how much is wrong before they
   read any of it. */
.inn-shell .inn-validation-summary {
    margin: 0 0 20px;
    padding: 16px 18px;
    border: 2px solid var(--c-err-border);
    border-left-width: 6px;
    border-radius: 10px;
    background: var(--c-err-bg);
    color: var(--c-err);
}

.inn-shell .inn-validation-summary-title {
    margin: 0 0 8px;
    font-weight: 700;
}

.inn-shell .inn-validation-summary ul {
    margin: 0;
    padding-left: 20px;
}

.inn-shell .inn-validation-summary li + li {
    margin-top: 4px;
}

/* Inherit the summary's colour rather than the generic link colour: a brand-blue link inside a red
   panel reads as unrelated navigation instead of as one of the listed problems. */
.inn-shell .inn-validation-summary a {
    color: inherit;
    text-decoration: underline;
}

/* **This rule reaches every <label> in every step, and it out-specifies a component's own class.**
   Two classes plus one element beats `.inn-shell .some-component-thing`, and loading a component sheet
   later does not change that — specificity decides. A component that styles a `<label>` as anything
   other than a stacked form label therefore has to answer `display`, `font-weight` and `margin`
   from a selector of at least three classes. Finding F66 is what happens when it does not: the consent
   yes/no pill lost `display: inline-flex`, was laid out as a block, and its centring, its gap and its
   masked ::before all went inert. `ConsentContractTests.TheConsentPillOutSpecifiesTheSharedFormLabelRule`
   fails if a fourth declaration is added here without the pill answering it. */
.inn-shell .form-body label {
    display: inline-block;
    margin-bottom: 4px;
    font-weight: 600;
    color: var(--c-fg);
}

/* The required marker is decorative repetition — the field also carries `data-val-required`, and
   the accessible name comes from the label text. Colour alone must not be the signal, which is why
   the glyph stays. */
.inn-shell .redStar {
    color: var(--c-err);
    font-weight: 700;
}

/* 44px is the prototype's own control height (`Innmelding.dc.html:231`) and it is a FLOOR, not a step
   on the way down: it clears WCAG 2.2 AA target size (2.5.8, 24x24 CSS px) with margin and matches the
   44px platform guideline for a thumb. A contract test fails if it is ever lowered. */
.inn-shell .form-body .form-control,
.inn-shell .form-body .form-select {
    min-height: 44px;
    border: 1px solid var(--c-border);
    border-radius: 7px;
    background: var(--c-bg);
    color: var(--c-fg);
    font-size: 1rem;
}

/* Focus is handled by the shell's global `:focus-visible` outline, so this only strengthens the
   border — two signals rather than a colour swap. */
.inn-shell .form-body .form-control:focus,
.inn-shell .form-body .form-select:focus {
    border-color: var(--c-border-strong);
}

/* `readonly` fields are set by InputFieldsTagHelper from the tenant's metadata. They must read as
   unavailable without reading as broken, so: a filled surface, full-strength text. Dimming the
   text would drop it below 4.5:1. */
.inn-shell .form-body .form-control[readonly],
.inn-shell .form-body .form-control:disabled,
.inn-shell .form-body .form-select:disabled {
    background: var(--c-surface-2);
    color: var(--c-fg);
}

.inn-shell .form-body .form-text {
    display: block;
    margin-top: 4px;
    font-size: 0.9rem;
    color: var(--c-fg-soft);
}

/* jQuery-unobtrusive adds this to the input; the border plus the message below it are the two
   signals, so an invalid field is never identified by colour alone. */
.inn-shell .form-body .input-validation-error {
    border-color: var(--c-err);
    border-width: 2px;
    background: var(--c-err-bg);
}

/* `.field-validation-valid` is the same span before validation runs, and it must stay laid out or
   the form shifts when a message appears. */
.inn-shell .form-body .field-validation-error {
    display: block;
    margin-top: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--c-err);
}

.inn-shell .form-body .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}

.inn-shell .form-body .form-check-label {
    margin-bottom: 0;
    font-weight: 400;
}

.inn-shell .form-body .form-check-input {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
}

/* --------------------------------------------------------------------------
   The grey hero panel, removed.

   `Membership/Start`, `Hytte/Start` and `StandardReceiptViewComponent` all wrap their intro in
   `<div class="p-3 mb-4 bg-light rounded-3 mt-4">` — a Bootstrap utility panel that paints a grey box
   inside the shell's own white card. **The design has no such panel**: the heading and its text sit
   directly on the card. The user reported the difference against the canvas
   (`Test-result/errormessage.png`, left half).

   The three views are shared with the legacy layout, so this is CSS rather than a markup edit — same
   constraint, same answer as the toast. `.bg-light.rounded-3` is the pair that identifies these hero
   panels; matching `.bg-light` alone would reach any future element that only wanted the tint.

   `!important` is required on both properties, not chosen: Bootstrap's spacing and background
   utilities carry it, so nothing without it can replace them. The padding goes with the background —
   a transparent box that still insets its content by 16 px is a misalignment, not a neutral panel.
   -------------------------------------------------------------------------- */
.inn-shell .bg-light.rounded-3 {
    padding: 0 !important;
    background-color: transparent !important;
}

/* --------------------------------------------------------------------------
   Field groups — from the prototype (Innmelding.dc.html:225, 265, 317, 369, 448).

   The design does not present a step as a flat list of fields. It groups them into framed sections
   with a caption sitting on the frame — Kontaktinformasjon, Navn og fødsel, Adresse, Fylkeslag,
   Tilleggsopplysninger — and the running page had none of it (`Test-result/MisingFrame.png`).

   Values are the prototype's, verbatim:

       fieldset   border: 1px solid var(--c-border); border-radius: 10px; padding: 16px 18px;
                  background: var(--c-bg)
       legend     font-size: 18px; font-weight: 700; padding: 0 8px; margin-left: -8px

   `margin-left: -8px` with `padding: 0 8px` is what makes the caption sit ON the frame line with a
   gap either side rather than indented inside it — the two numbers cancel, so the text still starts
   flush with the fields below it.

   **The markup is emitted only when the new design is on** (see the two view components), so this
   file styles something legacy never receives. The rules are still scoped to `.inn-shell` for the
   same reason as everything else here.
   -------------------------------------------------------------------------- */
.inn-shell .inn-fieldgroup {
    min-width: 0; /* fieldset defaults to min-content, which breaks the Bootstrap grid inside it */
    /* 18px is the prototype's own separation between fieldsets — `Innmelding.dc.html:223` lays the form
       out as `display:grid; gap:18px`. It is 4px MORE than the `--k-gap` this used to borrow, and that
       is deliberate even in a slice about removing whitespace: the groups are what the eye reads first
       now, and their separation is the one gap still doing work. Everything inside them got tighter. */
    margin: 0 0 18px;
    padding: 16px 18px;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-bg);
}

.inn-shell .inn-fieldgroup > legend {
    float: none; /* Bootstrap Reboot floats legend, which takes it out of flow and off the frame */
    width: auto;
    padding: 0 8px;
    margin-left: -8px;
    margin-bottom: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-fg);
}

/* A tenant can switch every field in a group off through its `InnmeldingFormFieldHelper` rows, and
   the tag helpers then suppress each control individually — leaving the group's frame and caption
   standing around nothing. This hides that case without asking the server to predict it. */
.inn-shell .inn-fieldgroup:not(:has(input, select, textarea)) {
    display: none;
}

/* --------------------------------------------------------------------------
   One spacing scale inside a group — Phase 4C, finding F60.

   The form was carrying vertical space from three systems that did not know about each other:
   Bootstrap's `g-4` gutters (24px), margin utilities hand-written on six of the seven rows
   (`mt-2`, `mt-4`, `mb-2`, all `!important`), and this file. **The design specifies one number for all
   of it** — `Innmelding.dc.html:227` builds the field grid as `gap: 14px`, on both axes, and uses no
   per-row margin anywhere.

   How Bootstrap's grid actually spaces itself, because both rules below depend on it:

       .row      margin-top: calc(-1 * var(--bs-gutter-y))
       .row > *  margin-top: var(--bs-gutter-y)

   Every column gets a top margin, including the first line, and the row's negative margin exists only
   to cancel it. Overriding `--bs-gutter-y` therefore moves both halves together and keeps that
   arithmetic intact — which is why the gutter is retargeted here rather than the padding or the margin
   being restated by hand. Restating them is what produced F60.

   `margin-top: 0` on the row is kept from the F56 rule, and now it is right rather than accidental:
   with the gutter at 14px it leaves exactly one 14px gap under the caption and one between each pair of
   rows, so legend-to-field, field-to-field and column-to-column are all the same number. **That is a
   stated deviation from the prototype**, which puts the fields in a single CSS grid whose `gap` applies
   only *between* items — so its caption sits directly on the first field with no gap at all. 14px there
   reads better than 0 and costs one line of scroll; a caption glued to a control is the worse defect.

   `!important` on the margins is not a choice: `mt-2` and friends are Bootstrap utilities and carry it,
   so nothing without it can replace them. **CSS and not a markup edit**, because those rows are shared
   with the legacy layout, which keeps its current spacing.
   -------------------------------------------------------------------------- */
.inn-shell .inn-fieldgroup .row {
    --bs-gutter-x: 14px;
    --bs-gutter-y: 14px;
}

.inn-shell .inn-fieldgroup > .row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}