/* Ain't Misbehaving - public auth pages (login / register).
   Loaded last in public/base.html so it wins over auth-framework
   without needing !important. */

:root {
    --tp-violet: #7c3aed;
    --tp-violet-bright: #a855f7;
    --tp-violet-light: #c084fc;
    --tp-void: #06040c;
    --tp-text: #ece9f3;
    --tp-text-muted: #9d94b3;
}

body.tp-public {
    min-height: 100dvh;
    margin: 0;
    background-color: var(--tp-void);
    background-image: url("../img/wormhole.cefcf0b86044.jpg");
    background-repeat: no-repeat;
    /* The source art puts the wormhole aperture left of centre; at cover on a
       16:9 viewport a centred crop loses it entirely. */
    background-position: 34% center;
    background-size: cover;
    background-attachment: fixed;
    color: var(--tp-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Darkens the nebula so white text clears contrast anywhere the
   artwork happens to brighten. */
.tp-veil {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        /* Pool of shade under the centred text column only, so the nebula
           still reads across the rest of the frame. */
        radial-gradient(ellipse 30rem 22rem at 50% 50%, rgb(6 4 12 / 0.72) 0%, rgb(6 4 12 / 0.4) 55%, rgb(6 4 12 / 0) 100%),
        radial-gradient(ellipse at 50% 45%, rgb(6 4 12 / 0) 0%, rgb(6 4 12 / 0.35) 75%, rgb(6 4 12 / 0.6) 100%),
        linear-gradient(to bottom, rgb(6 4 12 / 0.4), rgb(6 4 12 / 0.1) 40%, rgb(6 4 12 / 0.5));
}

.tp-shell {
    position: relative;
    z-index: 1;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
}

.tp-panel {
    width: 100%;
    max-width: 22rem;
    text-align: center;
}

/* The source art is a circular badge sitting on a white field. Clipping to
   42.5% of the box lands exactly on the badge rim, so the white corners go
   without needing the image re-cut offline. */
.tp-crest {
    width: 7rem;
    height: 7rem;
    clip-path: circle(42.5%);
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 0 1.75rem rgb(124 58 237 / 0.45));
}

.tp-wordmark {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tp-text);
}

.tp-sub {
    margin: 0.4rem 0 2rem;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--tp-text-muted);
}

.tp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.875rem; /* 46px - clears the 44px touch minimum */
    padding: 0 1.25rem;
    border: 0;
    border-radius: 0.25rem;
    background: var(--tp-violet);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 160ms ease-out, transform 160ms ease-out;
}

.tp-btn:hover,
.tp-btn:focus-visible {
    background: var(--tp-violet-bright);
    color: #fff;
    transform: translateY(-1px);
}

.tp-btn:active {
    transform: translateY(0);
}

.tp-note {
    margin: 0 0 1.25rem;
    font-size: 0.875rem;
    color: var(--tp-text-muted);
}

.tp-note strong {
    color: var(--tp-text);
}

.tp-signout {
    margin-top: 1rem;
}

.tp-link-btn {
    border: 0;
    background: none;
    padding: 0.5rem;
    font-size: 0.8rem;
    color: var(--tp-text-muted);
    cursor: pointer;
}

.tp-link-btn:hover,
.tp-link-btn:focus-visible {
    color: #f87171;
}

.tp-messages {
    margin-bottom: 1.25rem;
    text-align: left;
}

.tp-messages .alert {
    border: 1px solid rgb(124 58 237 / 0.35);
    border-radius: 0.25rem;
    background: rgb(21 12 36 / 0.85);
    color: var(--tp-text);
    font-size: 0.85rem;
    padding: 0.75rem 1rem;
}

.tp-messages .alert-error,
.tp-messages .alert-danger {
    border-color: rgb(248 113 113 / 0.45);
}

.tp-lang {
    margin-top: 1.75rem;
}

.tp-lang select,
.tp-lang .form-select {
    width: auto;
    min-width: 9rem;
    min-height: 2.25rem;
    margin: 0 auto;
    border: 1px solid rgb(124 58 237 / 0.28);
    border-radius: 0.25rem;
    background-color: rgb(13 8 22 / 0.9);
    color: var(--tp-text-muted);
    font-size: 0.8rem;
}

.tp-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1.75rem;
}

.tp-links a {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--tp-text-muted);
    text-decoration: none;
    transition: color 160ms ease-out;
}

.tp-links a:hover,
.tp-links a:focus-visible {
    color: var(--tp-violet-light);
}

:where(.tp-btn, .tp-links a, .tp-link-btn, .tp-lang select):focus-visible {
    outline: 2px solid var(--tp-violet-light);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .tp-btn {
        transition: none;
    }

    .tp-btn:hover,
    .tp-btn:focus-visible {
        transform: none;
    }
}

/* background-attachment: fixed is expensive and buggy on mobile Safari. */
@media (max-width: 48rem) {
    body.tp-public {
        background-attachment: scroll;
    }
}