/* ==========================================================================
   HomeRP signed-out shell (#83)
   ==========================================================================

   The public pages (home, support, sign-in, register, confirm, reset) render
   without the application sidebar, inside this centred card under a light brand
   header. Token-driven, so it re-paints with the theme like everything else.
   ========================================================================== */

.anon-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

.anon-shell__top {
    display: flex;
    align-items: center;
    padding: var(--space-4) var(--content-pad-x);
}

    /* The brand carries its own padding inside the sidebar; here the header owns it. */
    .anon-shell__top .app-brand {
        padding: 0;
    }

.anon-shell__main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-4);
}

.anon-card {
    width: 400px;
    max-width: 100%;
    padding: 1.9rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

    .anon-card > h1 {
        font-size: var(--fs-xl);
        margin-bottom: var(--space-1);
    }

/* A short intro line under the heading on an auth page. */
.anon-card__lede {
    margin-bottom: var(--space-5);
    color: var(--muted);
    font-size: var(--fs-base);
}

/* The "or create an account" style foot line under a form. */
.anon-card__alt {
    margin: var(--space-4) 0 0;
    color: var(--muted);
    font-size: var(--fs-base);
    text-align: center;
}

.anon-shell__foot {
    padding: var(--space-4) var(--content-pad-x);
    color: var(--muted);
    font-size: var(--fs-sm);
    text-align: center;
}