/*
 * The login page (templates/public/login.html). The page holds exactly one thing — "sign in with
 * Discord" — so instead of a small card on an empty page, the Discord brand lockup *is* the page:
 * one blurple rounded rect with the mark, the wordmark and the CTA inside it.
 *
 * Blurple (#5865F2) is Discord's brand colour, so the button inside the panel cannot use the site's
 * red accent from button.css; it is re-skinned here as Discord's white-on-blurple CTA. That override
 * is scoped to .login__panel so button.css stays the source of truth everywhere else.
 */
.login {
    display: grid;
    justify-items: center;
    /* Sits a fifth of the viewport below the topbar rather than centred, so the panel reads as the
       top of the page instead of floating in it. */
    margin-top: 20vh;
    padding: 0 1.5rem 3rem;
}

.login__panel {
    --blurple: #5865F2;
    --blurple-deep: #4752C4;

    width: min(520px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px;
    border-radius: clamp(24px, 4vw, 32px);
    background: var(--blurple);
}

.login__lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1.1rem);
}

.login__mark {
    width: clamp(96px, 24vw, 140px);
    height: 70%;
    fill: #ffffff;
    display: block;
}

.login__wordmark {
    font-family: var(--display, sans-serif);
    font-size: clamp(1.9rem, 6vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: #ffffff;
}

/* Discord's own CTA on a blurple surface: white fill, blurple label. */
.login__panel .button {
    --button-border: transparent;
    width: 100%;
    padding: 0.9rem 1.5rem;
    border-radius: 999px;
    background: #ffffff;
    color: var(--blurple);
    font-size: 1rem;
    font-weight: 700;
}

.login__panel .button:visited {
    color: var(--blurple);
}

.login__panel .button:hover {
    border-color: transparent;
    background: #ffffff;
    color: var(--blurple-deep);
    box-shadow: 0 6px 20px rgb(0 0 0 / 0.22);
    transform: translateY(-1px);
}

.login__panel .button:active {
    background: #F2F3FF;
    box-shadow: none;
    transform: translateY(1px);
}

.login__panel .button:focus-visible {
    border-color: transparent;
    box-shadow: 0 0 0 3px rgb(255 255 255 / 0.55);
}

.login__error {
    margin: 1.25rem 0 0;
    /* Readable on blurple — the layout's red accent is not. */
    color: #FFE0E0;
    background: rgb(0 0 0 / 0.22);
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    font-size: 0.9rem;
}