/* ==========================================================================
   Nyxwatch · auth.css
   Login / register screen (index.html).
   ========================================================================== */

/* Column, not row: the page is now content plus a footer stacked, and `main` centres itself in
   whatever vertical space is left over. base.css already gives the body min-height: 100vh, so on a
   tall screen the footer lands at the bottom and on a short one it simply follows the card
   instead of covering it — which a fixed footer would. */
body.auth-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    overflow-x: hidden;
}

.auth {
    position: relative;
    z-index: 1;
    /* Auto margins on a flex item absorb the free space on every side, which centres the card
       block vertically and horizontally without the footer being dragged into the middle with it. */
    margin: auto;
    width: min(940px, 100%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
}

/* ---------- Intro side ---------- */
.intro .brand__word {
    font-size: 1.8rem;
}

.intro__eyebrow {
    margin-top: 2.4rem;
    font-size: .62rem;
    letter-spacing: .38em;
    text-transform: uppercase;
    color: var(--ice);
    display: flex;
    align-items: center;
    gap: .8rem;
}

    .intro__eyebrow::before {
        content: "";
        width: 30px;
        height: 1px;
        background: linear-gradient(to right, var(--ice), transparent);
    }

.intro__title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2.1rem, 4vw, 3.1rem);
    line-height: 1.08;
    color: var(--frost);
    margin: 1rem 0 0;
}

.intro__lede {
    margin: 1.2rem 0 0;
    max-width: 38ch;
    font-size: .86rem;
    line-height: 1.75;
    color: var(--mist);
}

.pillars {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1.8rem;
}

.pillar {
    font-size: .6rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text);
    border: 1px solid var(--line-2);
    padding: .45rem .8rem;
}

/* ---------- Card ---------- */
.card {
    background: linear-gradient(180deg, var(--void-2), var(--void-1));
    border: 1px solid var(--line-2);
    box-shadow: 0 40px 110px -40px #000, inset 0 1px 0 rgba(110, 181, 212, .07);
}

.card__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--line);
    font-size: .58rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--mist);
}

    .card__bar .dot {
        display: inline-block;
        margin-right: .5rem;
        vertical-align: middle;
    }

/* ---------- Tabs ---------- */
.tabs {
    display: flex;
    border-bottom: 1px solid var(--line);
}

.tab {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--mist);
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 1rem .5rem;
    transition: color .25s, border-color .25s, background .25s;
}

    .tab[aria-selected="true"] {
        color: var(--ice);
        border-bottom-color: var(--ice);
        background: rgba(110, 181, 212, .04);
    }

/* ---------- Panes & fields ---------- */
.pane {
    padding: 1.6rem 1.5rem 1.7rem;
}

.field {
    margin-bottom: 1.05rem;
}

    .field label {
        display: block;
        font-size: .58rem;
        letter-spacing: .24em;
        text-transform: uppercase;
        color: var(--mist);
        margin-bottom: .5rem;
    }

    .field input {
        width: 100%;
        background: var(--void);
        border: 1px solid var(--line-2);
        color: var(--frost);
        font-family: var(--mono);
        font-size: .85rem;
        padding: .8rem .85rem;
        transition: border-color .2s, box-shadow .2s;
    }

        .field input::placeholder {
            color: var(--ash);
        }

        .field input:focus-visible {
            outline: none;
            border-color: var(--ice);
            box-shadow: 0 0 0 1px var(--ice), 0 0 22px -10px var(--ice);
        }

        .field input[aria-invalid="true"] {
            border-color: var(--alert);
        }

.err {
    display: block;
    font-size: .62rem;
    color: var(--alert);
    margin-top: .4rem;
    min-height: .9rem;
}

/* ---------- Feedback banner ---------- */
.feedback {
    font-size: .68rem;
    letter-spacing: .04em;
    padding: .7rem .85rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    display: none;
}

    .feedback.show {
        display: block;
    }

    .feedback.bad {
        color: var(--alert);
        border-color: rgba(232, 149, 155, .4);
        background: rgba(232, 149, 155, .06);
    }

    .feedback.good {
        color: var(--ice-soft);
        border-color: var(--line-2);
        background: rgba(110, 181, 212, .06);
    }

/* ---------- Submit ---------- */
.submit {
    width: 100%;
    font-family: var(--mono);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: .95rem 1rem;
    margin-top: .3rem;
    background: var(--ice);
    color: var(--void);
    border: 1px solid var(--ice);
    transition: background .25s, box-shadow .25s;
}

    .submit:hover {
        background: var(--ice-soft);
        box-shadow: 0 0 26px -8px var(--ice);
    }

    .submit:focus-visible {
        outline: 2px solid var(--ice-soft);
        outline-offset: 2px;
    }

    .submit[disabled] {
        opacity: .5;
        pointer-events: none;
    }

.pane__foot {
    margin-top: 1.1rem;
    font-size: .62rem;
    letter-spacing: .04em;
    color: var(--ash);
    text-align: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
    .auth {
        grid-template-columns: 1fr;
        gap: 2.4rem;
        width: min(420px, 100%);
    }

    .pillars {
        gap: .5rem;
    }
}

/* ---------- Page footer ---------- */
.site-foot {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 100%;
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    color: var(--muted, currentColor);
    opacity: .55;
    text-align: center;
}

.site-foot__links {
    display: flex;
    gap: .55rem;
    align-items: center;
}

.site-foot__copy {
    margin: 0;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .7rem;
    letter-spacing: .04em;
}

/* Legible on hover without shouting the rest of the time — legal links should be findable, not
   competing with the sign-in button for attention. */
.site-foot a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

    .site-foot a:hover,
    .site-foot a:focus-visible {
        color: var(--ice, inherit);
        border-bottom-color: currentColor;
    }

@media (max-width: 820px) {
    .site-foot {
        padding-top: 2rem;
    }
}