@layer base {
    body {
        display: grid;
        grid-template-rows: auto 1fr auto 9em;

        &.public {
            grid-template-rows: auto 1fr auto;
        }
    }

    :where(#main) {
        inline-size: 100dvw;
        margin-inline: auto;
        max-inline-size: 100dvw;
        padding-inline:
            calc(var(--main-padding) + env(safe-area-inset-left)) calc(var(--main-padding) + env(safe-area-inset-right));
        text-align: center;
    }

    :where(#footer) {
        max-inline-size: 100dvw;
    }

    :where(#header) {
        position: relative;
        z-index: var(--z-nav);
    }

    :is(#header, #footer) {
        @media print {
            display: none;
        }
    }

    /* Standalone centered page (login, error pages, etc.) */
    .page--centered {
        display: grid;
        min-block-size: 100dvh;
        padding: var(--block-space-double) var(--inline-space-double);
        place-items: center;
    }

    .page--narrow {
        inline-size: 100%;
        max-inline-size: 28rem;
    }

    .page__footer {
        position: fixed;
        inset-block-end: 0;
        inset-inline: 0;
        padding: var(--block-space) var(--inline-space);
        text-align: center;
        font-size: var(--txt-small);
        color: var(--color-ink-lighter);
    }

    .select-list {
        list-style: none;
        margin: 0;
        padding: 0;
        border: 1px solid var(--color-ink-lighter);
        border-radius: 0.75em;
        overflow: hidden;
    }

    .select-list__item + .select-list__item {
        border-block-start: 1px solid var(--color-ink-lighter);
    }

    .select-list__link {
        --icon-size: 1.25em;

        display: flex;
        align-items: center;
        gap: 0.75em;
        padding: 0.85em 1.25em;
        color: var(--color-ink);
        text-decoration: none;
        font-weight: 500;
        font-size: var(--txt-medium);

        &:hover {
            background-color: var(--color-canvas-tinted);
        }
    }
}