@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

html, body {
    font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* The brand colours the page styling below draws on directly (docs/design-system/foundations.md).
   The leaf - two opposite corners rounded, two square - is the shape the brand's own marks use, and
   the one the invitation email gives its header and boxes, so the pages a customer reaches from it
   carry on in the same voice. */
:root {
    --keima-forest: #223313;
    --keima-growth: #DEF9C7;
    --keima-growth-soft: #D1ECB8;
    --keima-growth-sunken: #E7F5DC;
    --keima-grass: #89CC4E;
    --keima-tint: #F3F9EE;
    --keima-line: #CFE3BF;
    --keima-muted: #4A5A42;
    --keima-leaf-sm: 14px 0 14px 0;
    --keima-leaf-md: 16px 0 16px 0;
    --keima-leaf-lg: 24px 0 24px 0;
}

/* Every filled call to action is a Growth leaf with Forest text, flipping to Forest with Growth
   text under the pointer or keyboard focus. Not Forest at rest: with the header and footer both
   Forest, a Forest button read as one more block of the page rather than as the thing to press.
   The Forest border keeps the pale leaf from fading into the near-white page. */
.mud-button-filled.mud-button-filled-primary {
    border: 1.5px solid var(--keima-forest);
    background-color: var(--keima-growth);
    color: var(--keima-forest);
    transition: background-color 150ms, color 150ms;
    box-shadow: none;
}

/* The leaf shape and size are for text buttons only. MudBlazor gives a filled icon button the same
   classes, and the round "add billing details" button keeps its own circle from its markup. */
.mud-button-filled.mud-button-filled-primary:not(.mud-icon-button) {
    min-height: 48px;
    padding-left: 28px;
    padding-right: 28px;
    border-radius: var(--keima-leaf-lg);
}

.mud-button-filled.mud-button-filled-primary:focus-visible {
    background-color: var(--keima-forest);
    color: var(--keima-growth);
}

/* Only where a pointer can really hover: a touch screen keeps :hover after a tap, which left the
   button Forest as if still held down while the next page loaded. */
@media (hover: hover) {
    .mud-button-filled.mud-button-filled-primary:hover {
        background-color: var(--keima-forest);
        color: var(--keima-growth);
    }
}

.mud-button-filled.mud-button-filled-primary:disabled {
    border-color: transparent;
}

/* Secondary actions - the "+ Tilføj" buttons - are pills: a leaf did not read as a button, and the
   one shape for both add buttons makes them read as the same action. */
.mud-button-outlined.mud-button-outlined-primary,
.mud-button-outlined.mud-button-outlined-default {
    border-radius: 999px;
}

.mud-dialog {
    border-radius: var(--keima-leaf-lg);
}

.mud-dialog .mud-dialog-title {
    font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
    font-weight: 800;
    color: var(--keima-forest);
}

/* Grass focus ring on keyboard navigation (design-system foundations: accent = focus). */
:focus-visible {
    outline: 2px solid #89CC4E;
    outline-offset: 2px;
}

h1:focus {
    outline: none;
}

/* Form validation states use the design-system status colours: darkened Grass
   for valid, brand error red for invalid. */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #4F7A28;
}

.invalid {
    outline: 1px solid #D2362C;
}

.validation-message {
    color: #D2362C;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }


/* One installation row inside a FormSection. Only one row is open at a time; the rest collapse to
   their header line - a numbered leaf, what the row identifies, and Rediger - so several
   installations under several billing sets read as a list rather than a wall of fields. The open
   row is outlined in Forest so it is clear which one is being edited. */
.keima-installation-row {
    overflow: hidden;
    border: 1px solid #E2E5DE;
    border-radius: 10px;
    margin-bottom: 8px;
    background-color: #FFFFFF;
}

.keima-installation-row-open {
    border: 1.5px solid var(--keima-forest);
    margin-bottom: 12px;
}

.keima-installation-row-header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 6px 8px 6px 14px;
    box-sizing: border-box;
    color: var(--keima-forest);
}

.keima-installation-row-open .keima-installation-row-header {
    border-bottom: 1px solid var(--keima-growth-sunken);
}

.keima-installation-row-number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 10px 0 10px 0;
    background-color: var(--keima-growth);
    color: var(--keima-forest);
    font-size: 0.8125rem;
    font-weight: 800;
}

.keima-installation-row-open .keima-installation-row-number {
    background-color: var(--keima-forest);
    color: var(--keima-growth);
}

.keima-installation-row-title {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.keima-installation-row-label {
    font-size: 0.875rem;
    font-weight: 700;
}

/* The address or meter id the row currently holds. It gives way before the label does,
   since it is the part that can be read from the fields below. */
.keima-installation-row-summary {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.keima-installation-row-summary:empty {
    display: none;
}

/* A collapsed row that still needs something, in the warning tone of the list by the submit
   button, so it can be found without opening every row. */
.keima-installation-row-missing {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 700;
    color: #B4471E;
}

.keima-installation-row-edit {
    flex: 0 0 auto;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.keima-installation-row-body {
    padding: 0 12px 8px;
}


/* The "private or business" choice: a segmented pill - one pale track, the two options as halves,
   the chosen half filled Grass. It is a choice rather than an action, so it looks like a toggle
   and not like the buttons; what the chosen option will ask of the participant is said under it.

   It is still MudBlazor's radio group underneath, so the keyboard, screen readers and the
   required-rule keep working. MudRadio puts its Class on the input-control wrapper rather than on
   the label, so each half is that wrapper. The selector names the input-control classes because
   MudBlazor's own rule for this group does, and would otherwise outrank it. */
.keima-choice-group .mud-input-control.mud-input-control-boolean-input .mud-radio-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    gap: 4px;
    padding: 4px;
    box-sizing: border-box;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background-color: var(--keima-growth-sunken);
}

/* Until a choice is made the track is outlined in Forest - the one attention-drawing device. */
.keima-choice-group-unset .mud-input-control.mud-input-control-boolean-input .mud-radio-group {
    border-color: var(--keima-forest);
}

/* Half the track each. Qualified by the group because MudBlazor pins its own flex: none on these
   wrappers. */
.keima-choice-group .keima-choice-tile {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    border-radius: 999px;
    background-color: transparent;
    transition: background-color 150ms;
}

@media (hover: hover) {
    .keima-choice-group .keima-choice-tile:not(.keima-choice-tile-selected):hover {
        background-color: rgba(255, 255, 255, 0.7);
    }
}

.keima-choice-group .keima-choice-tile-selected {
    background-color: var(--keima-grass);
}

.keima-choice-tile .mud-radio {
    position: relative;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0 12px;
    justify-content: center;
    align-items: center;
}

/* The fill says which half is picked, so the radio's circle would be a second marker for the
   same thing. It stays in the DOM for the keyboard and for screen readers. */
.keima-choice-tile .mud-radio .mud-icon-button {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.keima-choice-tile:has(input:focus-visible) {
    outline: 2px solid var(--keima-forest);
    outline-offset: 2px;
}

/* Spans, because MudRadio wraps its content in a <p> and a <p> may not contain divs. */
.keima-choice-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--keima-forest);
}

.keima-choice-card-icon {
    flex: 0 0 auto;
    color: var(--keima-forest);
}

/* What the chosen option will ask of the participant, under the toggle. */
.keima-choice-hint {
    display: block;
    margin-top: 8px;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}


/* What is left to do before the form can be sent, in the warning colour: it is not an
   error - nothing is wrong with what has been entered - but it is the thing standing
   between the participant and sending the form, so it should catch the eye. The fields
   themselves still carry their own errors. */
.keima-submit-blockers {
    padding: 16px;
    border: 1px solid var(--mud-palette-warning);
    border-radius: var(--mud-default-borderradius);
    background-color: rgba(var(--mud-palette-warning-rgb), 0.08);
    color: var(--mud-palette-warning-darken);
}

.keima-submit-blockers ul {
    margin: 8px 0 0;
    padding-left: 1.5rem;
}

.keima-submit-blockers li {
    padding: 2px 0;
    font-size: 0.875rem;
    line-height: 1.4;
}


/* The block introducing the group above the signup form: the Forest band, opening with Keima's
   light logo as the one running the signup, then what the group is offering and where. The group's
   own logo sits on a white card overlapping the band's lower edge - on the left on a phone, on the
   right on a wide screen. White because group logos come in every colour and a dark one would
   vanish on Forest; the card is leaf-shaped, but the logo inside it keeps its own shape. */
.keima-masthead {
    margin-bottom: 32px;
}

/* Room at the foot of the band for the half of the card that overlaps it. */
.keima-masthead-with-logo .keima-hero {
    padding-bottom: 80px;
}

/* In the flow rather than positioned, so a tall logo pushes the form down instead of covering it;
   the negative margin is what pulls it up over the band. At least as wide as a typical wordmark's
   card, with the logo centred: a square logo (Sydstevns Energi's) otherwise left a narrow tile that
   read as an afterthought beside the band. And at least 96px tall, so a wide wordmark (ENERGIV's)
   that its width cap keeps short still hangs below the band by as much as any other card. */
.keima-masthead-logo-card {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: fit-content;
    min-width: 200px;
    min-height: 96px;
    margin: -48px 0 0 24px;
    padding: 12px 16px;
    border: 1px solid #E2E5DE;
    border-radius: 20px 0 20px 0;
    background-color: #FFFFFF;
    box-shadow: 0 6px 18px rgba(25, 25, 25, 0.12);
}

/* Bounded on both axes: group logos arrive at whatever size and shape they were uploaded at, and
   the box keeps a wide one from dwarfing the page. The height allowance is what a square logo gets
   to use - Sydstevns Energi's is 161x161 - while a wide wordmark runs out of width first. 72px
   left logos with small lettering (Skårup's) unreadable, and 128px made the card overlapping the
   band hang well below it; 96px keeps Skårup's lettering legible with a card that sits close. The
   280px width lets a wide wordmark (ENERGIV's) grow taller than 220px allowed. */
.keima-masthead-logo {
    display: block;
    width: auto;
    max-width: 280px;
    max-height: 96px;
}

/* Group names run long - "Bliv andelshaver i Ærø Borgerenergifællesskab A.M.B.A." - so the size
   gives way on narrow screens (via .keima-hero-title). */
.keima-masthead-title {
    overflow-wrap: anywhere;
}

.keima-masthead-subtitle {
    font-size: 1.125rem;
    font-weight: 500;
}

.keima-masthead-description {
    max-width: 62ch;
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--keima-growth-soft);
    /* The stored copy carries its own paragraph breaks. */
    white-space: pre-line;
}

.keima-masthead-postal-codes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.keima-masthead-postal-codes-label {
    flex-basis: 100%;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--keima-growth);
}

/* The line a reader checks themselves against, so it is the one thing in the band set in Growth
   leaves rather than prose. */
.keima-postal-code {
    padding: 4px 12px;
    border-radius: 10px 0 10px 0;
    background-color: var(--keima-growth);
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--keima-forest);
}


/* An aside on the form: something worth knowing before filling a section in. Tinted in the
   theme's info blue - enough to be read as a note rather than as more form furniture, and
   distinct from both the brand green around it and the warning colour that means something
   is actually outstanding. */
.keima-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid rgba(var(--mud-palette-info-rgb), 0.4);
    border-radius: var(--mud-default-borderradius);
    background-color: rgba(var(--mud-palette-info-rgb), 0.08);
    color: var(--mud-palette-text-primary);
    font-size: 0.875rem;
    line-height: 1.5;
}

.keima-note-icon {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--mud-palette-info);
}


/* "+ Tilføj" - adding another billing set or installation: a Forest pill with Growth text, turning
   Grass under the pointer or keyboard focus. Filled, because an outline alone did not read as
   something to press; Forest, so it is distinct from the light main call to action. */
.mud-button-outlined.keima-add-button {
    padding: 4px 16px 4px 12px;
    border: 1.5px solid var(--keima-forest);
    border-radius: 999px;
    background-color: var(--keima-forest);
    color: var(--keima-growth);
    transition: background-color 150ms, color 150ms, border-color 150ms;
}

.mud-button-outlined.keima-add-button:focus-visible {
    border-color: var(--keima-grass);
    background-color: var(--keima-grass);
    color: var(--keima-forest);
}

@media (hover: hover) {
    .mud-button-outlined.keima-add-button:hover {
        border-color: var(--keima-grass);
        background-color: var(--keima-grass);
        color: var(--keima-forest);
    }
}

/* The add-a-billing-group button, shown inside a sentence that refers to it: a small "+ Tilføj"
   pill like the real one. Sized to the text rather than to the real button: at full size it would
   push the lines around it apart. */
.keima-note-button {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 20px;
    margin: 0 2px;
    padding: 0 8px 0 4px;
    border-radius: 999px;
    box-sizing: border-box;
    border: 1px solid var(--keima-forest);
    background-color: var(--keima-forest);
    color: var(--keima-growth);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
}

.keima-note-button .mud-icon-root {
    width: 13px;
    height: 13px;
    font-size: 13px;
}


/* One step of a form (FormSection): a numbered leaf on a rail, the heading beside it, and the
   step's fields under the heading. The rail runs on to the next step, so a long form reads as one
   sequence to work down rather than a stack of unrelated cards. */
.keima-step {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 16px;
}

.keima-step-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.keima-step-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: var(--keima-leaf-md);
    background-color: var(--keima-forest);
    color: var(--keima-growth);
    font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
    font-size: 1.1875rem;
    font-weight: 800;
}

.keima-step-line {
    flex: 1 1 auto;
    width: 2px;
    margin-top: 6px;
    background-color: var(--keima-line);
}

.keima-step-last .keima-step-line {
    display: none;
}

/* Each step's heading and fields sit on a white card beside the rail, as the sections did before
   the restyle: the card tells one step from the next, and the rail between the cards still reads
   as the sequence. The margin below a card is the gap the rail runs through to the next number. */
.keima-step-body {
    min-width: 0;
    margin-bottom: 24px;
    padding: 16px 20px 20px;
    border: 1px solid #E2E5DE;
    border-radius: 12px;
    background-color: #FFFFFF;
}

.keima-step-last .keima-step-body {
    margin-bottom: 8px;
}

.keima-step-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    min-height: 40px;
    margin-bottom: 8px;
}

.keima-step-title {
    margin: 0;
    font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--keima-forest);
}

.keima-step-actions {
    margin-left: auto;
}

.keima-step-subtitle {
    margin: -4px 0 12px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

/* A phone has no width to spare for the rail or the card: the fields take the full width, the step's
   number sits in its heading row, and the space between steps is what separates them. */
@media (max-width: 599px) {
    .keima-step {
        display: block;
        position: relative;
    }

    .keima-step-rail {
        position: absolute;
        top: 0;
        left: 0;
    }

    .keima-step-line {
        display: none;
    }

    .keima-step-marker {
        width: 34px;
        height: 34px;
        border-radius: var(--keima-leaf-sm);
        font-size: 1rem;
    }

    .keima-step-header {
        min-height: 34px;
        padding-left: 46px;
    }

    .keima-step-body {
        margin-bottom: 32px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background-color: transparent;
    }
}


/* The line between a block's billing details and the addresses they pay for. */
.keima-section-divider {
    border-color: var(--keima-line);
}


/* One document to accept. Outlined in Forest on white until it is ticked, filled Growth once it
   is: with several documents in a row, what is left to accept should be visible without reading
   each checkbox, and an outlined row reads as something still to fill in. A faint grey resting
   state was too easy to pass over as already done.

   The accepted row keeps a transparent border of the same width, so ticking does not shift it. */
.keima-term {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 4px 12px;
    margin-bottom: 8px;
    box-sizing: border-box;
    border: 1.5px solid var(--keima-forest);
    border-radius: var(--keima-leaf-md);
    background-color: #FFFFFF;
    transition: background-color 150ms, border-color 150ms;
}

.keima-term-accepted {
    border-color: transparent;
    background-color: var(--keima-growth);
}

/* The checkbox brings its own padding on top of the row's. */
.keima-term .mud-checkbox {
    margin-left: -8px;
}


/* The Forest band a page opens with: its title, a line under it, and whatever the page needs the
   reader to see before anything else. The one rounded corner is the leaf shape cut in half, the way
   the invitation email's header is. */
.keima-hero {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px 32px;
    border-radius: 0 0 48px 0;
    background-color: var(--keima-forest);
    color: var(--keima-growth-soft);
}

.keima-hero-title {
    margin: 0;
    font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--keima-growth);
}

.keima-hero-lead {
    max-width: 62ch;
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--keima-growth-soft);
}

/* A short fact to check against - the customer number, a postcode - set apart from the prose. */
.keima-hero-chip {
    align-self: flex-start;
    padding: 6px 14px;
    border-radius: var(--keima-leaf-sm);
    background-color: var(--keima-growth);
    color: var(--keima-forest);
    font-size: 0.875rem;
}

/* The title of a page that has reached an outcome carries a badge saying which one. */
.keima-hero-heading {
    display: flex;
    align-items: center;
    gap: 14px;
}

.keima-hero-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 18px 0 18px 0;
    background-color: var(--keima-grass);
    color: var(--keima-forest);
}

.keima-hero-badge-warning {
    background-color: #FCE7C8;
    color: #7A4A06;
}

/* Its own size, not the band's width: as a flex item in the band's column it would otherwise be
   stretched across the whole band while its height stayed capped, distorting it on a wide screen. */
.keima-hero-illustration {
    display: block;
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 170px;
}

/* The body of a page that opens with the band: the band's own left edge, a little air below it. */
.keima-page-body {
    padding: 28px 24px 8px;
}

/* An aside that closes a page: a Growth leaf with an illustration in its corner, as the email's
   customer-number box is. */
.keima-closing-note {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    align-items: end;
    gap: 12px;
    margin-top: 24px;
    padding: 18px 20px 14px;
    border-radius: 32px 0 32px 0;
    background-color: var(--keima-growth);
    color: var(--keima-forest);
}

.keima-closing-note p {
    margin: 0 0 6px;
}

.keima-closing-note img {
    display: block;
    width: 120px;
    height: auto;
}

@media (max-width: 599px) {
    .keima-hero {
        padding: 16px 20px 28px;
    }

    .keima-page-body {
        padding: 24px 16px 8px;
    }
}


/* The frame for pages Keima sends a customer to directly (the CPR backfill and its MitID return):
   the band with Keima's logo at its top, the page, and a Forest footer to close it. One column the
   width of the form, so the logo, the page and the footer share a left edge. */
.keima-brand-frame {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 760px;
    margin: 0 auto;
}

.keima-brand-frame > main {
    flex: 1 0 auto;
}

/* The logo file is trimmed to the mark, so its height here is the height the mark reads at. */
.keima-brand-logo-link {
    display: inline-flex;
    align-self: flex-start;
    line-height: 0;
}

/* Its own width, not the band's: placed straight in the band's column (the signup page) it would
   otherwise be stretched across it. */
.keima-brand-logo {
    align-self: flex-start;
    height: 36px;
    width: auto;
}

/* Quiet by design: the form is the point of the page, and this is what a reader looks for only
   when something has gone wrong or they are unsure the email was genuine. */
.keima-brand-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 40px;
    padding: 20px 24px;
    border-radius: 32px 0 0 0;
    background-color: var(--keima-forest);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--keima-growth-soft);
}

.keima-brand-footer a {
    font-weight: 600;
    color: var(--keima-growth);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.keima-brand-footer a:hover {
    color: #FFFFFF;
}

.keima-brand-footer-separator {
    color: var(--keima-growth-soft);
}

@media (max-width: 599px) {
    .keima-brand-logo {
        height: 30px;
    }
}


/* Where a process has got to (StepProgress): each step a leaf marker - ticked when done, numbered
   when still to come, spinning while it runs, an exclamation mark when it needs the reader - joined
   by a rail that turns Grass once the step above it is done. */
.keima-progress {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.keima-progress-step {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 14px;
}

.keima-progress-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.keima-progress-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: var(--keima-leaf-sm);
    background-color: var(--keima-growth);
    color: var(--keima-forest);
    font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
    font-size: 1rem;
    font-weight: 800;
}

.keima-progress-done .keima-progress-marker,
.keima-progress-current .keima-progress-marker {
    background-color: var(--keima-forest);
    color: var(--keima-growth);
}

.keima-progress-attention .keima-progress-marker {
    background-color: #FCE7C8;
    color: #7A4A06;
}

.keima-progress-line {
    flex: 1 1 auto;
    width: 2px;
    min-height: 16px;
    background-color: var(--keima-line);
}

.keima-progress-done .keima-progress-line {
    background-color: var(--keima-grass);
}

.keima-progress-step:last-child .keima-progress-line {
    display: none;
}

.keima-progress-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0 14px;
}

.keima-progress-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--keima-forest);
}

.keima-progress-body {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.keima-progress-spinner {
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 2.5px solid var(--keima-line);
    border-top-color: var(--keima-forest);
    border-radius: 50%;
    animation: keima-spin 0.9s linear infinite;
}

@keyframes keima-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .keima-progress-spinner {
        animation: none;
    }
}


/* One CUBS agreement in the backfill's Betalingsservice step: what it is on top, and the choice
   it offers - or the note that it needs none - on a tinted strip below. */
.agreement-card {
    overflow: hidden;
    margin-bottom: 12px;
    border: 1px solid var(--keima-growth-sunken);
    border-radius: 10px;
    background-color: #FFFFFF;
}

.agreement-card-details {
    padding: 14px 16px;
}

.agreement-card-choice {
    padding: 4px 16px 12px;
    background-color: var(--keima-tint);
}

.agreement-card-in-place {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px 14px;
    font-size: 0.875rem;
    color: var(--keima-forest);
}

/* A last step's lead-in sentence with an illustration beside it: the pylons that close both the
   backfill and the signup form. */
.keima-step-illustrated {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    align-items: center;
    gap: 12px;
}

.keima-step-illustration {
    display: block;
    width: 120px;
    height: auto;
}


/* On a wide screen the sign-up band has room beside its text, so the houses move to its top right,
   larger, and the text keeps clear of them; stacked under the title they left most of the band
   empty. Top rather than bottom, because the group's logo card overlaps the bottom right. */
@media (min-width: 900px) {
    .keima-masthead .keima-hero {
        position: relative;
        min-height: 240px;
    }

    .keima-masthead .keima-hero > :not(.keima-hero-illustration) {
        max-width: calc(100% - 360px);
    }

    .keima-masthead .keima-hero-illustration {
        position: absolute;
        top: 32px;
        right: 40px;
        max-width: 320px;
        max-height: 220px;
    }

    .keima-masthead-with-logo .keima-hero {
        min-height: 300px;
    }

    .keima-masthead-logo-card {
        margin: -48px 48px 0 auto;
    }
}


/* A page's one call to action: the full width of a phone, where it is the easiest thing to hit,
   but sized to its words and centred on anything wider - stretched across a desktop column it
   stops reading as a button. */
.keima-cta {
    width: 100%;
}

@media (min-width: 600px) {
    .keima-cta {
        display: flex;
        width: auto;
        min-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }
}


/* Read by screen readers, not shown: for state the page otherwise carries only in colour or icons. */
.keima-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* A field's explanation when it needs more than MudBlazor's plain-text helper line - a link, say.
   Set like the helper text it replaces: small, muted, just under the field. */
.keima-field-help {
    margin: 4px 0 0;
    padding: 0 14px;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.keima-field-help a {
    font-weight: 600;
    color: var(--keima-forest);
    text-decoration: underline;
    text-underline-offset: 2px;
}