/*
 * The signed-out shell (DESIGN.md 7.8, sign-in pages): the sign-in and sign-up form, the logo, the theme
 * button and language menu. Loaded by _AuthLayout.cshtml only.
 *
 * The reset, buttons, form fields, banners and card surface it relies on come from base.css, and the
 * menu surface from components.css, both loaded by _AuthLayout.cshtml.
 *
 * One layout at every width: the centered logo over a translucent glass card, on a brand-blue to
 * brand-orange gradient. Below 600px the card keeps a 16px
 * gutter and tighter padding.
 */

/* The glass colors are tokens (design-tokens.css, --bc-glass-*), so they follow the theme; the page
   reads them through its own names so the fallback below can replace them. */
body.admin-auth-body {
    --auth-glass-fill: var(--bc-glass-fill);
    --auth-glass-rim: var(--bc-glass-rim);
    --auth-glass-shadow: var(--bc-glass-shadow);
    --auth-glass-filter: blur(28px) saturate(180%);
    --auth-controls-filter: blur(20px) saturate(180%);
    position: relative;
    /* The app's own background (DESIGN.md 2.3): the brand-blue to brand-orange gradient. */
    background: var(--bc-app-background);
    background-attachment: fixed;
}

.auth-shell {
    position: relative;
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

.auth-pane {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

/* The theme button and the language menu, in the trailing corner, where the shell's toolbar keeps its controls, on a
   small glass pill of their own. */
.auth-controls {
    position: absolute;
    top: calc(var(--bc-space-2) + env(safe-area-inset-top, 0px));
    right: calc(var(--bc-space-2) + env(safe-area-inset-right, 0px));
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--bc-space-1);
    padding: var(--bc-space-1);
    border: 1px solid var(--auth-glass-rim);
    border-radius: var(--bc-radius-capsule);
    background: var(--auth-glass-fill);
    box-shadow: 0 4px 16px var(--auth-glass-shadow);
    -webkit-backdrop-filter: var(--auth-controls-filter);
    backdrop-filter: var(--auth-controls-filter);
}

.auth-controls .language-menu {
    inset: auto;
    top: calc(var(--bc-space-2) + 56px + env(safe-area-inset-top, 0px));
    right: calc(var(--bc-space-2) + env(safe-area-inset-right, 0px));
}

/* One centered column: the logo, the form, and the link to the other auth page. It centers while it
   fits and starts at the top when it does not, so a tall sign-up form never loses its logo. */
.user-main.login-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    gap: var(--bc-space-8);
    padding: calc(var(--bc-space-12) + var(--bc-space-4)) var(--bc-space-4) var(--bc-space-12);
}

.user-brand,
.user-brand:hover,
.user-brand:focus {
    display: block;
    border-radius: var(--bc-radius-menu);
    text-decoration: none;
}

/* The wordmark is about 3.1:1; the height sets its size. */
.user-brand-logo {
    display: block;
    width: auto;
    height: 72px;
}

.login-shell {
    width: min(100%, 420px);
}

/* DESIGN.md 7.8: a glass card with the sheet's corners. The sheen is a soft light from the top
   leading corner, painted under the content. */
.login-card {
    position: relative;
    isolation: isolate;
    padding: var(--bc-space-10) var(--bc-space-8) var(--bc-space-8);
    border: 1px solid var(--auth-glass-rim);
    border-radius: var(--bc-radius-sheet);
    background: var(--auth-glass-fill);
    box-shadow:
        0 12px 40px var(--auth-glass-shadow);
    -webkit-backdrop-filter: var(--auth-glass-filter);
    backdrop-filter: var(--auth-glass-filter);
}

.login-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
        radial-gradient(120% 60% at 0% 0%, color-mix(in srgb, var(--bc-glass-sheen) 45%, transparent), transparent 60%),
        radial-gradient(80% 50% at 100% 100%, color-mix(in srgb, var(--bc-glass-sheen) 18%, transparent), transparent 70%);
    pointer-events: none;
}

/* The headline and its line are centered under the centered logo. */
.login-card-header {
    margin-bottom: var(--bc-space-8);
    text-align: center;
}

.login-card-header h1 {
    margin: 0 0 var(--bc-space-2);
    color: var(--bc-label);
    font-size: var(--bc-type-large-title-size);
    font-weight: var(--bc-type-large-title-weight);
    line-height: var(--bc-type-large-title-line);
    letter-spacing: var(--bc-type-large-title-tracking);
}

/* The one short line under the headline. */
.login-card-lead {
    margin: 0;
    color: var(--bc-label-secondary);
    font-size: var(--bc-type-body-size);
    line-height: var(--bc-type-body-line);
    letter-spacing: var(--bc-type-body-tracking);
}

/* The fields are base.css's (DESIGN.md 6.2): label above, a filled rounded field with its 3:1 boundary.
   Their translucent fill reads on the glass card as it does on a solid surface. */

/* First and last name share a row where there is room for both. */
.login-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--bc-space-3);
}

/* Under the password, on its trailing edge: secondary to the submit button, like the link to the other page. */
.login-forgot-link {
    position: relative;
    display: table;
    margin: calc(-1 * var(--bc-space-2)) 0 var(--bc-space-4) auto;
    font-size: var(--bc-type-body-size);
    font-weight: 600;
    line-height: var(--bc-type-body-line);
    letter-spacing: var(--bc-type-body-tracking);
}

/* Its hit area reaches 24px (WCAG 2.5.8) without moving the text. */
.login-forgot-link::after {
    content: "";
    position: absolute;
    inset: -2px 0;
}

.login-submit {
    width: 100%;
    /* The large control size (44px): the one action of the page, as an Apple sign-in sheet has it. */
    min-height: 44px;
    margin-top: var(--bc-space-2);
}

/* The link between the two auth pages: sign-in offers registration and sign-up offers
   sign-in. Outside the card and secondary to the submit button by weight and colour, so it
   never competes with the action the visitor came for. */
/* The line under the card stands on the gradient: the secondary label and the accent come too close to
   4.5:1 there (DESIGN.md 9), so both the sentence and its link are the primary label,
   the link told apart by its weight and underline. */
.login-alt-action {
    margin: var(--bc-space-6) 0 0;
    color: var(--bc-label);
    font-size: var(--bc-type-body-size);
    line-height: var(--bc-type-body-line);
    letter-spacing: var(--bc-type-body-tracking);
    text-align: center;
}

.login-alt-action a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Without backdrop blur, when the viewer asks for less transparency and in forced colours, the glass is the
   solid material fallback (DESIGN.md 2.4, 9); asking for more contrast also gives the rims the strong
   separator. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.admin-auth-body {
        --auth-glass-fill: var(--bc-glass-solid);
        --auth-glass-filter: none;
        --auth-controls-filter: none;
    }
}

@media (prefers-reduced-transparency: reduce) {
    body.admin-auth-body {
        --auth-glass-fill: var(--bc-glass-solid);
        --auth-glass-filter: none;
        --auth-controls-filter: none;
    }
}

@media (forced-colors: active) {
    body.admin-auth-body {
        --auth-glass-fill: var(--bc-glass-solid);
        --auth-glass-filter: none;
        --auth-controls-filter: none;
    }
}

@media (prefers-contrast: more) {
    body.admin-auth-body {
        --auth-glass-fill: var(--bc-glass-solid);
        --auth-glass-filter: none;
        --auth-controls-filter: none;
        --auth-glass-rim: var(--bc-separator-strong);
    }
}

/* ------------------------------------------------------------ below 600px */

@media (width < 600px) {
    .user-main.login-main {
        gap: var(--bc-space-6);
        padding: calc(var(--bc-space-12) + var(--bc-space-6)) var(--bc-space-4) var(--bc-space-8);
    }

    .user-brand-logo {
        height: 56px;
    }

    .login-card {
        padding: var(--bc-space-8) var(--bc-space-5) var(--bc-space-6);
        border-radius: var(--bc-radius-sheet);
    }

    .login-field-row {
        grid-template-columns: 1fr;
    }
}

/* The 404 page's sign-in button, for a visitor who is not signed in. */
.not-found-actions {
    display: flex;
    justify-content: center;
}