/*
    STORM :: web sign in

    Only ever rendered in a browser. A single centred card over the same
    dark chrome as the portal, so signing in and arriving at the dashboard
    feel like one system.
*/

.auth-root {
    display: grid;
    place-items: center;
    padding: var(--space-6);
    background: var(--pt-bg);
    color: var(--pt-text);
    overflow-y: auto;

    /* The same generated backdrop as the public landing page, dimmed. */
    background-image:
        radial-gradient(ellipse at 20% 30%, rgba(52, 118, 214, .18), transparent 60%),
        radial-gradient(ellipse at 80% 70%, rgba(18, 44, 98, .3), transparent 65%);
}

.auth-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    max-width: 440px;
    padding: var(--space-8);
    border: 1px solid var(--pt-border);
    border-radius: var(--radius-lg);
    background: var(--pt-surface);
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.auth-mark { line-height: 0; }

.auth-title { font-size: var(--text-xl); font-weight: 800; }

.auth-sub {
    margin: 0;
    font-size: var(--text-sm);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pt-muted);
}

.auth-card .stack { width: 100%; align-items: stretch; }

.auth-copy { margin: 0; font-size: var(--text-base); line-height: 1.6; color: #d8d8d8; }

.auth-foot { margin: 0; font-size: var(--text-sm); color: var(--pt-muted); line-height: 1.5; }

/* -- Discord ------------------------------------------------------------ */

.auth-discord {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 20px;
    border-radius: var(--radius-sm);

    /* Discord blurple. Recognisable enough that nobody hesitates. */
    background: #5865f2;
    color: #fff;
    font-size: var(--text-md);
    font-weight: 700;
    transition: filter .12s ease;
}

.auth-discord:hover { filter: brightness(1.12); }

/* -- Linking ------------------------------------------------------------ */

.auth-steps {
    margin: 0;
    padding-left: 22px;
    text-align: left;
    font-size: var(--text-base);
    line-height: 1.9;
    color: #d0d0d0;
}

.auth-code {
    width: 100%;
    padding: 14px;
    border: 2px solid #3d3d3d;
    border-radius: var(--radius-sm);
    background: #141414;
    color: #fff;
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: .32em;
    text-align: center;
    text-transform: uppercase;
}

.auth-code:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .25);
}

.auth-code::placeholder { color: #4a4a4a; letter-spacing: .32em; }

.auth-submit {
    padding: 12px 20px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--blue);
    color: #fff;
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: 700;
    cursor: pointer;
}

.auth-submit:hover { filter: brightness(1.12); }
.auth-submit:disabled { opacity: .5; cursor: not-allowed; filter: none; }

.auth-signout {
    font-size: var(--text-sm);
    color: var(--pt-muted);
    text-align: center;
}
.auth-signout:hover { text-decoration: underline; }

/* -- Errors ------------------------------------------------------------- */

.auth-error {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    border-left: 3px solid var(--red);
    border-radius: var(--radius-sm);
    background: rgba(220, 53, 69, .12);
    color: #ffb3ba;
    font-size: var(--text-sm);
    text-align: left;
    line-height: 1.45;
}

.auth-error[hidden] { display: none; }