/* Shared surfaces for sign-in, recovery and other standalone entry screens.
   Keep the hosts' brand colours and controls, with one treatment for backdrop, header and cards. */
.entry-background {
    --entry-tint: var(--signin-brand, var(--brand, #0f4c81));
    --entry-surface: var(--page, #f6f8fa);
    --entry-gutter: 1rem;
    --entry-radius: 1.25rem;
    --entry-shadow: 0 12px 36px -24px rgb(15 23 42 / 25%);
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--entry-surface);
    background-image:
        radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--entry-tint) 8%, transparent), transparent 60%),
        radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--entry-tint) 6%, transparent), transparent 55%),
        linear-gradient(color-mix(in srgb, var(--entry-tint) 1.2%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--entry-tint) 1.2%, transparent) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 4rem 4rem, 4rem 4rem;
    background-repeat: no-repeat, no-repeat, repeat, repeat;
}

/* Entry pages use document scrolling so masthead and cards share the same content width.
   The signed-in mobile apps keep their fixed shell and independently scrolling main region. */
.entry-background > .entry-shell {
    display: flow-root;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    background: transparent;
}

/* Inset mastheads follow the same edges as the content below them. The accent rule follows the
   rounded edge rather than leaving a square strip against the page background. */
.entry-shell > .app-header,
.admin-auth.entry-background > .admin-bar {
    margin: max(var(--entry-gutter), env(safe-area-inset-top))
        max(var(--entry-gutter), env(safe-area-inset-right)) 0
        max(var(--entry-gutter), env(safe-area-inset-left));
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--on-app-header) 16%, transparent);
    border-radius: var(--entry-radius);
    box-shadow: inset 0 -3px 0 var(--brand-rule),
        0 10px 28px -18px color-mix(in srgb, var(--app-header) 60%, transparent);
}

.entry-shell > .app-header .brand {
    min-width: 0;
}

.entry-shell > main {
    overflow: visible;
    scrollbar-gutter: auto;
    padding-top: 1.75rem;
    padding-inline: max(var(--entry-gutter), env(safe-area-inset-left))
        max(var(--entry-gutter), env(safe-area-inset-right));
}

.entry-shell .card,
.admin-auth.entry-background .card,
.entry-background .signin-card {
    border-radius: var(--entry-radius);
    box-shadow: var(--entry-shadow);
}

.entry-shell .card,
.admin-auth.entry-background .card {
    padding: clamp(1.1rem, 3vw, 1.5rem);
}

.admin-auth.entry-background > .admin-bar {
    width: calc(100% - 2 * var(--entry-gutter));
    max-width: 41rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.admin-auth.entry-background main {
    padding-top: 2rem;
}

.signin-page.entry-background {
    padding: clamp(1.5rem, 5vh, 3.5rem) max(1rem, env(safe-area-inset-right))
        max(1.5rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

.entry-background .signin-brand {
    flex-wrap: wrap;
    row-gap: .25rem;
}

.entry-background .signin-field input,
.entry-background .signin-card button,
.entry-background .signin-button,
.entry-background .signin-quiet,
.admin-auth.entry-background :is(input:not([type=checkbox], [type=radio], [type=hidden]), button, .button-link) {
    border-radius: .625rem;
}

@media (min-width: 37.5rem) {
    .entry-background {
        --entry-gutter: 1.5rem;
    }

    .entry-shell > .app-header {
        padding-inline: 1.25rem;
    }
}

@media (prefers-color-scheme: dark) {
    .entry-background {
        --entry-tint: var(--signin-link-dark, var(--brand, #91b8dd));
        --entry-surface: var(--page, #14171c);
        --entry-shadow: 0 12px 36px -24px rgb(0 0 0 / 65%);
    }
}

@media (forced-colors: active), print {
    .entry-background {
        background: Canvas;
    }

    .entry-shell > .app-header,
    .admin-auth.entry-background > .admin-bar,
    .entry-shell .card,
    .admin-auth.entry-background .card,
    .entry-background .signin-card {
        box-shadow: none;
    }
}