/* Auth screens: split layout on desktop, single column on mobile. */

.guest-body {
    min-height: 100vh;
    background: var(--bg);
}

.guest-split { display: grid; min-height: 100vh; grid-template-columns: 1fr; }

/* --- brand panel --- */
/* Graphite rather than a brand gradient: the reference keeps pages achromatic
   and lets blue-600 do the punctuating, so the marketing side is plain ink. */
.guest-brand {
    display: none;
    background: var(--graphite);
    color: #fff;
    padding: 56px;
    align-items: center;
}
.guest-brand-inner { max-width: 420px; margin: auto; }
.guest-logo { object-fit: contain; margin-bottom: 28px; }

.guest-brand-title {
    font-family: 'Inter Tight', 'Space Grotesk', 'Inter', sans-serif;
    font-size: 2.1rem; font-weight: 400; letter-spacing: -.03em; line-height: 1.2;
}
.guest-brand-text {
    margin-top: 14px; font-size: 1.02rem; line-height: 1.6;
    color: rgba(255,255,255,.68);
}

.guest-features {
    list-style: none; margin: 36px 0 0; padding: 0;
    display: grid; gap: 10px;
}
.guest-features li {
    display: flex; align-items: center; gap: 12px;
    font-size: .92rem; color: rgba(255,255,255,.82);
}
/* Pill icon chips echo the navigation shape used throughout the app. */
.guest-features i {
    width: 24px; height: 24px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,.12);
    color: var(--brand-400);
    font-size: .7rem;
}

/* --- form panel --- */
.guest-main {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 20px;
    padding: 32px 20px;
}
.guest-card { width: 100%; max-width: 440px; }

.guest-head { margin-bottom: 32px; }
.guest-title {
    font-family: 'Inter Tight', 'Space Grotesk', 'Inter', sans-serif;
    font-size: 1.85rem; font-weight: 400; letter-spacing: -.03em;
}
.guest-subtitle { margin-top: 8px; color: var(--text-muted); font-size: .95rem; }

.guest-foot {
    font-size: .82rem; color: var(--text-subtle); text-align: center;
}

.auth-alt {
    margin-top: 28px; padding-top: 24px;
    border-top: 1px solid var(--mist);
    text-align: center; font-size: .9rem; color: var(--text-muted);
}

.auth-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 24px 0; color: var(--text-subtle); font-size: .78rem;
}
.auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--mist);
}

/* password strength meter */
.pw-strength { margin-top: 8px; display: grid; gap: 6px; }
.pw-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pw-bar {
    height: 4px; border-radius: var(--radius-pill);
    background: var(--border); transition: background-color .25s var(--ease);
}
.pw-bar.on-weak   { background: var(--expense); }
.pw-bar.on-medium { background: var(--warning); }
.pw-bar.on-strong { background: var(--income); }
.pw-label { font-size: .76rem; color: var(--text-muted); }

@media (min-width: 900px) {
    .guest-split { grid-template-columns: 1.05fr 1fr; }
    .guest-brand { display: flex; }
}