/* --------------------------------------------------------------------------
   Receipt and registration-error pages — Phase 5D, from the prototype's `erKvittering`
   (Innmelding.dc.html:999-1013) and `erFeil` (:1015-1032) blocks.

   Where the design writes px for type, this file writes the rem equivalent against the 16px base in
   base.css (17px = 1.0625rem, 18px = 1.125rem, 22px = 1.375rem, 26px = 1.625rem).

   **Every rule is scoped `.inn-shell …`, and the class names are new.** The legacy receipt is a Bootstrap
   jumbotron (`.p-5 .bg-light .rounded-3 .display-5 .lead`) and the legacy error page styles itself from an
   inline <style> block; nothing here shares a name with either, so this file cannot reach the legacy shell
   and the legacy shell's styles cannot reach this markup. A contract test fails if a rule here loses its
   `.inn-shell` prefix.

   **`.inn-receipt-text` deliberately styles descendants it did not write.** The tenant's own
   `ReceiptTekst` is HTML from `InnmeldingMedlemskap`, rendered with Html.Raw, and it can contain anything
   a tenant typed — headings, lists, tables. The rules below set the type scale and colour for that subtree
   rather than leaving it to Bootstrap's defaults, which would print a tenant's <h1> at display size inside
   a success panel. This is the one place in the design CSS that reaches into content it does not control,
   and it is on purpose.
   -------------------------------------------------------------------------- */

/* --- the receipt panel -------------------------------------------------------------------------- */
.inn-shell .inn-receipt {
    border: 1px solid var(--c-ok-border);
    border-radius: 10px;
    background: var(--c-ok-bg);
    padding: 24px;
    margin-bottom: 24px;
}

/* The "registered" line, with the check glyph. `--c-ok` on `--c-ok-bg` is the pair the consent pill
   already uses for an accepted answer, measured at 8.42:1 — above the AAA 7:1 bar this project adopted in
   Phase 2C. */
.inn-shell .inn-receipt-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--c-ok);
}

.inn-shell .inn-receipt-badge::before {
    content: "";
    flex: none;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask: var(--inn-icon-check-circle-solid) center / contain no-repeat;
    mask: var(--inn-icon-check-circle-solid) center / contain no-repeat;
}

/* An <h2>, not the legacy component's second <h1> (finding F69). Named rather than styling
   `.inn-shell h2`: the other steps still render Bootstrap's heading scale, and unifying that is its own
   job rather than a side effect of this slice — the same reasoning consent.css records. */
.inn-shell .inn-receipt-title {
    margin: 0 0 10px;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--c-fg);
}

/* `88ch` is the design's own measure. `text-wrap: pretty` keeps a one-word last line from happening on a
   page whose whole content is two sentences. */
.inn-shell .inn-receipt-text {
    margin: 0 0 18px;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--c-fg);
    max-width: 88ch;
    text-wrap: pretty;
}

/* See the file header: this subtree can be tenant-authored HTML. */
.inn-shell .inn-receipt-text > :last-child {
    margin-bottom: 0;
}

.inn-shell .inn-receipt-text h1,
.inn-shell .inn-receipt-text h2,
.inn-shell .inn-receipt-text h3 {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 8px;
}

.inn-shell .inn-receipt-text a {
    font-weight: 600;
}

/* --- the contact card --------------------------------------------------------------------------- */
.inn-shell .inn-receipt-contact {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 16px 18px;
}

.inn-shell .inn-receipt-contact-title {
    margin: 0 0 10px;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--c-fg);
}

/* `auto-fit` with a 240px floor is the design's own grid: three fields sit in a row on a wide viewport and
   stack on a narrow one with no media query, and a tenant with only one contact field gets one column
   rather than a third of a row. */
.inn-shell .inn-receipt-contact-list {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px 24px;
    font-size: 1.0625rem;
}

.inn-shell .inn-receipt-contact-list dt {
    font-weight: 700;
    font-size: 1rem;
    color: var(--c-fg-muted);
}

/* 40px of height on the value row, not on the <a>: it is what makes `tel:` and `mailto:` a real touch
   target on a phone, which is the reason the design made them links at all. */
.inn-shell .inn-receipt-contact-list dd {
    margin: 2px 0 0;
    min-height: 40px;
    display: flex;
    align-items: center;
}

/* --- the registration-error page ---------------------------------------------------------------- */
.inn-shell .inn-regerror {
    text-align: center;
    padding: 20px 0 40px;
}

/* The round badge from the prototype. `flex: none` and fixed dimensions rather than padding, so the circle
   stays a circle whatever the mask inside it is. */
.inn-shell .inn-regerror-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
    border: 2px solid var(--c-err-border);
    border-radius: 999px;
    background: var(--c-err-bg);
    color: var(--c-err);
}

.inn-shell .inn-regerror-badge::before {
    content: "";
    width: 32px;
    height: 32px;
    background-color: currentColor;
    -webkit-mask: var(--inn-icon-bug) center / contain no-repeat;
    mask: var(--inn-icon-bug) center / contain no-repeat;
}

/* The legacy page opens with `<h3 class="display-4">`, which skips a level under the shell's <h1>. The
   weight split — 400 for the sentence, 700 for the <b> — is the prototype's. */
.inn-shell .inn-regerror-title {
    margin: 0 0 16px;
    font-size: 1.625rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--c-fg);
}

.inn-shell .inn-regerror-title b {
    font-weight: 700;
}

.inn-shell .inn-regerror-lead {
    margin: 0 0 6px;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--c-fg);
}

.inn-shell .inn-regerror-note {
    margin: 0 0 18px;
    font-size: 1.0625rem;
    color: var(--c-fg-muted);
}

/* The reference is HttpContext.TraceIdentifier. `--c-fg-soft` for the label and full-strength for the
   value: the visitor has to be able to read it back over the phone, so the part that matters is the part
   that is legible. `break-all` because it is an opaque identifier with no break opportunities of its own
   and it must not widen the page at 320px. */
.inn-shell .inn-regerror-ref {
    margin: 0 0 22px;
    font-size: 1rem;
    color: var(--c-fg-soft);
}

.inn-shell .inn-regerror-ref b {
    color: var(--c-fg);
    font-weight: 700;
    word-break: break-all;
}

/* Left-aligned inside a centred page: it is a list to read down, not a banner. */
.inn-shell .inn-regerror-card {
    max-width: 520px;
    margin: 0 auto;
    text-align: left;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 22px;
}

.inn-shell .inn-regerror-card-title {
    margin: 0 0 10px;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--c-fg);
}

.inn-shell .inn-regerror-browsers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

/* 40px, as on the receipt's contact links and for the same reason. The legacy page gives these
   `line-height: 45px` from an inline <style> block, which this replaces. */
.inn-shell .inn-regerror-browsers a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    font-size: 1.0625rem;
}

/* --- no media query in this file, on purpose ----------------------------------------------------
   Neither page needs one. The contact grid is `auto-fit`, so it stacks on its own; the error card is
   `max-width` with `margin: auto`, so it shrinks on its own.

   The one rule that DOES need the 760px breakpoint — the mobile heading size shared with the consent
   step — lives in `responsive.css`, inside the shell's single 760px block. Three contract tests read
   "the 760px 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 has. */