*, *::before, *::after {
    box-sizing: border-box;
}

/* The page itself is a container too, so the body's grid can follow the width (R4.2 of session). */
html {
    container-type: inline-size;
}

body {
    container-type: inline-size;
    margin: 0;
    min-block-size: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header" "content";
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-background);
}

.skip-link {
    position: absolute;
    inset-inline-start: var(--spacing-md);
    inset-block-start: 0;
    translate: 0 -100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface);
    color: var(--color-text);

    &:focus-visible {
        translate: 0 var(--spacing-sm);
    }
}

:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

header {
    grid-area: header;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xs) var(--spacing-md);
    padding-block: calc(env(safe-area-inset-top) + var(--spacing-sm)) var(--spacing-sm);
    padding-inline: calc(env(safe-area-inset-left) + var(--spacing-md)) calc(env(safe-area-inset-right) + var(--spacing-md));
    background: var(--color-primary);
    color: var(--color-on-primary);

    a {
        color: inherit;
    }
}

.brand {
    font-weight: 700;
    font-size: var(--font-size-subheading);
    text-decoration: none;
}

b-i18n-language {
    margin-inline-start: auto;

    select {
        min-block-size: var(--tap-target);
        padding-inline: var(--spacing-sm);
        font: inherit;
        color: inherit;
        background: transparent;
        border: 1px solid currentColor;
        border-radius: var(--radius);

        option {
            color: var(--color-text);
            background: var(--color-surface);
        }
    }
}

b-session {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);

    button {
        background: transparent;
        color: inherit;
        border-color: currentColor;
    }
}

/* Narrow: a tab bar at the foot of the screen, the groups as a sheet under „Mehr“. */
b-session-navigation {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    svg {
        inline-size: 1.5rem;
        block-size: 1.5rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .tab-bar {
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: 10;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        padding-block-end: env(safe-area-inset-bottom);
        padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
        background: var(--color-surface);
        border-block-start: 1px solid var(--color-border);

        a, button {
            inline-size: 100%;
            min-block-size: 3.25rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.125rem;
            padding: var(--spacing-xs) 0;
            font: inherit;
            font-size: 0.6875rem;
            font-weight: 600;
            color: var(--color-muted);

            span {
                max-inline-size: 100%;
                padding-inline: 0.125rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            text-decoration: none;
            background: none;
            border: none;
            border-radius: 0;
        }

        [aria-current="page"], .current {
            color: var(--color-primary);
        }
    }

    .groups {
        inset-inline: 0;
        inset-block: auto 0;
        inline-size: 100%;
        max-inline-size: none;
        margin: 0;
        padding: var(--spacing-md) var(--spacing-md) calc(env(safe-area-inset-bottom) + var(--spacing-lg));
        border: none;
        border-radius: var(--radius) var(--radius) 0 0;
        background: var(--color-surface);
        color: var(--color-text);

        &::backdrop {
            background: oklch(0% 0 0 / 0.4);
        }

        a {
            min-block-size: var(--tap-target);
            display: flex;
            align-items: center;
            padding-inline: var(--spacing-sm);
            border-radius: var(--radius);
            color: inherit;
            font-weight: 600;
            text-decoration: none;

            &[aria-current="page"] {
                background: color-mix(in oklch, var(--color-primary) 12%, transparent);
                color: var(--color-primary);
            }

            &:hover {
                text-decoration: underline;
            }
        }
    }

    .group-label {
        display: block;
        margin-block: var(--spacing-md) var(--spacing-xs);
        padding-inline: var(--spacing-sm);
        font-size: var(--font-size-small);
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--color-muted);
    }
}

body:has(b-session-navigation nav) main {
    padding-block-end: calc(env(safe-area-inset-bottom) + 5rem);
}

/* Wide: the same groups as a sidebar beside the content; the popover is shown in place, never opened. */
@container (inline-size >= 48rem) {
    body:has(b-session-navigation nav) {
        grid-template-columns: 15rem minmax(0, 1fr);
        grid-template-areas: "header header" "nav content";

        main {
            padding-block-end: calc(env(safe-area-inset-bottom) + var(--spacing-xl));
        }
    }

    b-session-navigation {
        grid-area: nav;
        background: var(--color-surface);
        border-inline-end: 1px solid var(--color-border);

        .tab-bar {
            display: none;
        }

        .groups {
            position: sticky;
            inset: 0 auto auto;
            display: block;
            inline-size: auto;
            overflow: visible;
            padding: var(--spacing-sm) var(--spacing-md) var(--spacing-xl);
            border-radius: 0;
            background: transparent;
        }
    }
}

main {
    grid-area: content;
    inline-size: min(100%, var(--content-width));
    margin-inline: auto;
    padding-block: var(--spacing-md) calc(env(safe-area-inset-bottom) + var(--spacing-xl));
    padding-inline: var(--spacing-md);
}

h1 {
    font-size: var(--font-size-heading);
    margin-block: var(--spacing-sm) var(--spacing-md);
}

h2 {
    font-size: var(--font-size-subheading);
    margin-block: var(--spacing-lg) var(--spacing-sm);
}

button {
    min-block-size: var(--tap-target);
    padding-inline: var(--spacing-md);
    font: inherit;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
    background: var(--color-primary);
    color: var(--color-on-primary);
    cursor: pointer;
}

a.button {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-target);
    padding-inline: var(--spacing-md);
    border-radius: var(--radius);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 600;
    text-decoration: none;
}

button.danger {
    background: transparent;
    color: var(--color-alert);
    border-color: var(--color-alert);
}

form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);

    label {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
        font-weight: 600;
    }

    textarea {
        padding: var(--spacing-sm);
        font: inherit;
        font-weight: 400;
        color: var(--color-text);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        resize: vertical;
    }

    input[type="color"] {
        inline-size: 4rem;
        padding: var(--spacing-xs);
    }

    input, select {
        min-block-size: var(--tap-target);
        padding-inline: var(--spacing-sm);
        font: inherit;
        font-weight: 400;
        color: var(--color-text);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);

        &:user-invalid {
            border-color: var(--color-alert);
        }
    }

    button {
        align-self: start;
    }

    .check {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-sm);
        font-weight: 400;

        input {
            min-block-size: auto;
            inline-size: 1.25rem;
            block-size: 1.25rem;
        }
    }

    p {
        margin: 0;
        font-size: var(--font-size-small);
        color: var(--color-muted);

        &[role="alert"] {
            color: var(--color-alert);
        }
    }
}

[role="status"] {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius);
    background: var(--color-surface);
    border-inline-start: 4px solid var(--color-primary);
}

[role="alert"] {
    color: var(--color-alert);
    font-weight: 600;
}

.offline {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius);
    background: var(--color-offline);
    color: var(--color-on-offline);
}

b-dashboard {
    display: block;

    .fiscal-year {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        color: var(--color-muted);
    }

    .state {
        color: var(--color-text);
    }

    .amount {
        font-size: var(--font-size-amount);
        font-weight: 700;
        margin-block: 0;
    }

    ul {
        padding-inline-start: var(--spacing-lg);
    }
}

form.filter {
    margin-block-end: var(--spacing-md);
}

.booking-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);

    a {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: var(--spacing-xs) var(--spacing-md);
        padding: var(--spacing-sm) var(--spacing-md);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        background: var(--color-surface);
        color: var(--color-text);
        text-decoration: none;
    }

    /* An entry acted on in place, such as a device, looks like a linked one */
    li.device {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: var(--spacing-xs) var(--spacing-md);
        padding: var(--spacing-sm) var(--spacing-md);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        background: var(--color-surface);

        button {
            justify-self: start;
        }
    }
}

.booking-text {
    font-weight: 600;
}

.booking-amount {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: end;
}

.booking-meta {
    grid-column: 1 / -1;
    font-size: var(--font-size-small);
    color: var(--color-muted);

    strong {
        color: var(--color-alert);
    }
}

.booking-details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--spacing-sm) var(--spacing-md);

    dt {
        font-weight: 600;
    }

    dd {
        margin: 0;
    }
}

.receipts {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);

    li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-md);
    }
}

label.file {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    font-weight: 600;
    margin-block: var(--spacing-md);
}

b-bookings-edit > button.danger {
    margin-block-start: var(--spacing-lg);
}

fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);

    legend {
        font-weight: 700;
    }
}

output {
    color: var(--color-alert);
    font-weight: 600;
}

.history {
    padding-inline-start: var(--spacing-lg);
    font-size: var(--font-size-small);
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-block-end: var(--spacing-md);

    a {
        min-block-size: var(--tap-target);
        display: inline-flex;
        align-items: center;
        padding-inline: var(--spacing-md);
        border: 1px solid var(--color-primary);
        border-radius: var(--radius);
        color: var(--color-primary);
        text-decoration: none;
        font-weight: 600;

        &[aria-current="page"] {
            background: var(--color-primary);
            color: var(--color-on-primary);
        }
    }
}

.scroll {
    overflow-x: auto;
}

.ledger td {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

dialog {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    max-inline-size: min(90vw, 24rem);

    &::backdrop {
        background: oklch(0% 0 0 / 0.4);
    }

    form {
        flex-direction: row;
        flex-wrap: wrap;

        p {
            flex-basis: 100%;
            font-size: var(--font-size-base);
            color: var(--color-text);
        }
    }
}

table {
    inline-size: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border-radius: var(--radius);

    th, td {
        padding: var(--spacing-sm);
        border-block-end: 1px solid var(--color-border);
        text-align: start;
        vertical-align: top;
    }

    th[scope="row"] {
        font-weight: 400;
        hyphens: auto;
        overflow-wrap: anywhere;
    }

    td:last-child, thead th:last-child {
        text-align: end;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    tfoot th, tfoot td {
        font-weight: 700;
        border-block-end: none;
    }
}

main:has(b-letters) {
    inline-size: min(100%, 80rem);
}

b-letters {
    .designer {
        display: grid;
        gap: var(--spacing-lg);
    }

    .preview {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);

        h2 {
            margin-block-start: 0;
        }

        iframe {
            inline-size: 100%;
            aspect-ratio: 210 / 297;
            border: 1px solid var(--color-border);
            border-radius: var(--radius);
            background: var(--color-surface);
        }
    }

    .placeholders {
        display: grid;
        grid-template-columns: max-content 1fr;
        gap: var(--spacing-xs) var(--spacing-md);
        margin: var(--spacing-sm) 0 0;
        font-size: var(--font-size-small);

        dd {
            margin: 0;
        }
    }
}

/* Form and preview side by side once both have room; the preview stays in view while scrolling. */
@container (min-width: 60rem) {
    b-letters .designer {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }

    b-letters .preview {
        position: sticky;
        inset-block-start: var(--spacing-md);
    }

    b-letters .to-preview {
        display: none;
    }
}

b-organisation {
    form {
        margin-block-end: var(--spacing-lg);
    }

    form > h2 {
        margin-block-end: 0;
    }

    /* postal code beside town, a VAT rate's label beside its percentage and its remove button */
    .row {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        gap: var(--spacing-sm);

        > label {
            flex: 1 1 8rem;
        }
    }

    .complete {
        font-weight: 600;
    }
}

b-accounts .chart-transfer {
    margin-block: var(--spacing-md);

    summary {
        font-weight: 600;
    }
}

b-session-two-factor {
    .two-factor-steps {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
        padding-inline-start: var(--spacing-lg);
    }

    /* a light square around the code, also in dark mode, so every authenticator app reads it */
    .two-factor-qr {
        display: block;
        inline-size: min(14rem, 100%);
        margin-block: var(--spacing-sm);
        background: #ffffff;
        border-radius: var(--radius);
    }

    .two-factor-secret, .recovery-codes code {
        font-family: ui-monospace, monospace;
        letter-spacing: 0.05em;
    }

    .recovery-codes {
        columns: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
}