/* --------------------------------------------------------------------------
   Consent step — Phase 5C, from the prototype (Innmelding.dc.html:956-996) and its state table
   (:1696-1720). Rendered by ConsentListShellViewComponent.

   Every value below is the design's own; where it writes px for type, this file writes the rem
   equivalent against the 16px base in base.css (17px = 1.0625rem, 26px = 1.625rem).

   **Scoped `.inn-shell .inn-consent…`, and the class names matter as much as the rules.** The new shell
   still links `wwwroot/css/Consent.css` — the legacy consent sheet — because it also holds a global
   `.field-validation-error` rule other steps rely on. Nothing in this markup carries
   `.ContainerConsentText`, `.ContianerConsentRedOutLine` or `.consent-toggle`, so that file cannot reach
   the redesigned step and the two cannot fight. A contract test fails if one of those names reappears
   here.

   **The yes/no colours are semantic, not tenant.** The membership card is drawn in `--c-primary` because
   "the option you picked" means whatever the tenant's brand means; a consent answer means yes or no on
   every tenant, so this uses `--c-ok` / `--c-err` and lets the brand appear only on hover and focus.
   That also keeps it clear of the tenant-contrast risk recorded as F30.
   -------------------------------------------------------------------------- */

/* --- heading and lead, Innmelding.dc.html:958-960 -------------------------------------------------
   Deliberately named rather than styling `.inn-shell h2`: the other steps still render Bootstrap's
   heading scale, and unifying that is a step-by-step job, not a side effect of the consent slice. */
.inn-shell .inn-consent-heading {
    margin: 0 0 6px;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.25;
}

.inn-shell .inn-consent-lead {
    margin: 0 0 4px;
    font-size: 1.0625rem;
    color: var(--c-fg-muted);
}

.inn-shell .inn-consent-lead--last {
    margin-bottom: 16px;
    font-size: 1rem;
}

/* --- the list ----------------------------------------------------------------------------------- */
.inn-shell .inn-consent-list {
    display: grid;
    gap: 12px;
}

/* One consent. `flex-wrap` is what makes this responsive without a media query: the body below asks for
   320px and the choice keeps its own width, so on a narrow viewport the pills drop to a second row
   instead of crushing the text. */
.inn-shell .inn-consent {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-start;
    /* A fieldset carries a browser margin and `min-inline-size: min-content`, and the second one makes a
       flex fieldset refuse to shrink below its widest child. Both are reset here. */
    margin: 0;
    min-width: 0;
    padding: 14px 18px;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-bg);
}

/* The error frame, driven by the message element having content — the same mechanism membership.css
   uses for the picker. Nothing writes that message today; Phase 5B does, and the frame arrives with it
   rather than needing a second change. */
.inn-shell .inn-consent:has(.inn-consent-message:not(:empty)) {
    border-width: 2px;
    border-color: var(--c-err);
    background: var(--c-err-bg);
}

.inn-shell .inn-consent-body {
    flex: 1 1 320px;
    min-width: 0;
}

.inn-shell .inn-consent-text {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--c-fg);
    text-wrap: pretty;
}

/* 40px of height for a link that sits inline in a paragraph flow: it is a touch target, and the design
   gives it one. The underline comes from base.css and is left alone. */
.inn-shell .inn-consent-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    min-height: 40px;
    font-size: 1rem;
    font-weight: 600;
}

.inn-shell .inn-consent-link::after {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: var(--inn-icon-external) center / contain no-repeat;
    mask: var(--inn-icon-external) center / contain no-repeat;
}

/* --- the yes/no pair ---------------------------------------------------------------------------- */
/* `position: relative` is load-bearing: the radios are taken out of flow below, and without a
   containing block they would be positioned against the page. */
.inn-shell .inn-consent-choices {
    position: relative;
    flex: none;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

/* Hidden but present: it still receives focus, still owns the checked state, still posts. Not
   `display: none` and not `visibility: hidden`, either of which would take it out of the tab order and
   out of the accessibility tree. */
.inn-shell .inn-consent-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

/* **The third class is load-bearing, and so is `margin: 0`.** forms.css has
   `.inn-shell .form-body label { display: inline-block; font-weight: 600; margin-bottom: 4px }`, and
   every step in this shell renders inside `.form-body` — so that rule matches the pill, and at two
   classes plus one element it OUT-SPECIFIES `.inn-shell .inn-consent-pill`. Cascade order could not
   save this one; only specificity can.

   What it cost, measured in the browser and reported by the user (finding F66): the pill was laid out
   as a block, which made `justify-content`, `align-items` and `gap` inert; the ::before stayed
   `display: inline`, where width/height do not apply, so its 16px box collapsed and the state glyph
   never rendered; and "Ja"/"Nei" sat flush against the left padding at the top of a 44px box instead of
   centred. The weight was 600 instead of the design's 700 for the same reason.

   `.inn-consent-list` is this component's own root and is always the pill's ancestor, so scoping
   through it wins on specificity and depends on nothing outside this file's own markup. The state and
   :hover rules below already out-rank forms.css and are left at their own specificity. */
.inn-shell .inn-consent-list .inn-consent-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* 44px is the floor the rest of the shell uses (forms.css) — WCAG 2.2 target size with margin. */
    min-width: 80px;
    min-height: 44px;
    /* forms.css's 4px is a stacked-form-label rule. A pill in a horizontal pair is not that. */
    margin: 0;
    padding: 0 18px;
    border: 2px solid var(--c-border-strong);
    border-radius: 7px;
    background: var(--c-bg);
    color: var(--c-fg);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

/* The glyph is a mask, so it takes `currentColor` and follows the pill's own state colour. The default
   is an empty circle — "not answered" — and `:checked` swaps in the check or the cross below. */
.inn-shell .inn-consent-pill::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: var(--inn-icon-circle) center / contain no-repeat;
    mask: var(--inn-icon-circle) center / contain no-repeat;
}

.inn-shell .inn-consent-pill:hover {
    border-color: var(--c-primary);
}

.inn-shell .inn-consent-radio:checked + .inn-consent-pill--yes {
    border-color: var(--c-ok);
    background: var(--c-ok-bg);
    color: var(--c-ok);
}

.inn-shell .inn-consent-radio:checked + .inn-consent-pill--yes::before {
    -webkit-mask-image: var(--inn-icon-check-circle);
    mask-image: var(--inn-icon-check-circle);
}

.inn-shell .inn-consent-radio:checked + .inn-consent-pill--no {
    border-color: var(--c-err);
    background: var(--c-err-bg);
    color: var(--c-err);
}

.inn-shell .inn-consent-radio:checked + .inn-consent-pill--no::before {
    -webkit-mask-image: var(--inn-icon-cross-circle);
    mask-image: var(--inn-icon-cross-circle);
}

/* The ring belongs on the pill: the control it decorates is a 1px sliver the visitor cannot see. */
.inn-shell .inn-consent-radio:focus-visible + .inn-consent-pill {
    outline: 3px solid var(--c-primary);
    outline-offset: 2px;
}

/* --- finding F64: the client-side rejection, made visible ---------------------------------------
   `validRadioButtonRequired()` in Validation.js calls `addRedBlinkValidation("#" + radio.id)`, and
   `.redBlinkValidation` in Validation.css animates the radio's own BACKGROUND — on an element rendered
   at `opacity: 0` in both the old design and this one. So the one piece of feedback that says "this
   consent must be answered" has never been visible; only the toast reported it.

   This moves the same state onto the pill the visitor is actually looking at. Validation.js and
   Validation.css are shared with the legacy shell and are not touched; the duration matches
   `.redBlinkValidation`'s own 1s, and the reduced-motion block in a11y.css already neutralises it for
   anyone who asked for that. */
@keyframes innConsentReject {
    from {
        border-color: var(--c-err);
        background: var(--c-err-bg);
    }

    to {
        border-color: var(--c-border-strong);
        background: var(--c-bg);
    }
}

.inn-shell .inn-consent-radio.redBlinkValidation + .inn-consent-pill {
    animation: innConsentReject 1s 1;
}

/* --- the per-consent message (Phase 5B fills it) ------------------------------------------------ */
.inn-shell .inn-consent-message {
    flex: 1 1 100%;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--c-err);
}

/* An empty span must not open a 14px gap under every clean consent. */
.inn-shell .inn-consent-message:empty {
    display: none;
}

/* --- Ja til alt --------------------------------------------------------------------------------- */
.inn-shell .inn-consent-actions {
    display: flex;
    justify-content: flex-end;
}

.inn-shell .inn-consent-accept-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 20px;
    border: 2px solid var(--c-primary);
    border-radius: 999px;
    background: var(--c-bg);
    color: var(--c-primary);
    font-size: 1.0625rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.inn-shell .inn-consent-accept-all::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: var(--inn-icon-check-double) center / contain no-repeat;
    mask: var(--inn-icon-check-double) center / contain no-repeat;
}

.inn-shell .inn-consent-accept-all:hover {
    background: var(--c-primary);
    color: var(--c-bg);
}

/* --- no media query in this file, on purpose ----------------------------------------------------
   The consent rows are responsive without one: the fieldset wraps, so the pills drop to their own row
   when the text can no longer share it.

   The two rules that DO need the 760 px breakpoint — the 22px mobile heading and the full-width pill
   row — live in `responsive.css`, inside the shell's single 760 px block. That was going to be a local
   `@media` here until the suite said otherwise: three contract tests read "the 760 px media query" as
   one match over the concatenated design CSS, and a second block earlier in the cascade makes them
   assert against the wrong rules. One block is the convention this shell actually has. */