/*
 * The entrance page.
 *
 * A heading, a form and a brand side. No version and no hint about what lives behind
 * the door: a page that describes the system describes it to everyone.
 */

/*
 * A split screen (owner A93, 24.10.2026): the form on the left, the brand side on the right.
 * Both columns are as tall as the window; the form stands in the middle of its own.
 */
.app-entrance {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
}

.app-entrance__panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    align-self: center;
    justify-self: center;
    width: min(380px, 100%);
    padding: var(--space-6) var(--space-5);
}

/* The heading and its lead: the h1 takes its size from base.css; here only the spacing and the quiet lead. */
.app-entrance__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.app-entrance__lead {
    margin: 0;
    color: var(--text-3);
    line-height: var(--lh-text);
}

/*
 * The brand side: the accent colour, the surface colour for the text on it (about 7.9:1, core.md §17).
 * The picture is the footer illustration as it is, an opaque light card; the flat-background rule of
 * core.md §17.6 gives way to the owner's word (A93).
 */
.app-entrance__side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    padding: var(--space-6);
    background: var(--accent);
    color: var(--surface);
}

/* The same wordmark as the header, turned for the dark side: the word bold in a softer tone, the
   first letter heavier and in the full light tone (layout.css .app-header__brand). */
.app-entrance__wordmark {
    margin: 0;
    color: var(--accent-border);
    font-size: var(--fs-hero);
    font-weight: var(--fw-bold);
    line-height: 1;
}

.app-entrance__wordmark b {
    color: var(--surface);
    font-weight: var(--fw-heavy);
}

.app-entrance__tagline {
    max-width: 32ch;
    margin: 0;
    color: var(--accent-soft);
    font-size: var(--fs-section);
    line-height: var(--lh-text);
    text-align: center;
}

.app-entrance__art {
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    border-radius: var(--radius-lg);
}

/* Below the unfolded breakpoint the side is a band above the form: the wordmark only. */
@media (max-width: 720px) {
    .app-entrance {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        min-height: 0;
    }

    .app-entrance__side {
        order: -1;
        padding: var(--space-3);
    }

    .app-entrance__wordmark {
        font-size: var(--fs-widget);
    }

    .app-entrance__tagline,
    .app-entrance__art {
        display: none;
    }

    .app-entrance__panel {
        align-self: start;
        padding: var(--space-5) var(--space-3);
    }
}

/*
 * The trap field. Taken out of the flow rather than hidden with display:none, which the more
 * careful form fillers skip. Autocomplete and the tab order are switched off in the markup so a
 * password manager never offers to fill it.
 */
.app-entrance__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}