/* =========================================================
   AUTH LAYOUT — split screen: brand/trust panel + form panel
   Signature element: the "pulse" panel — a live-feeling grid
   of verified-care stats that reinforces trust at the exact
   moment someone is deciding whether to sign up.
   ========================================================= */

.auth-screen {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

/* ---- Left: brand / trust panel ---- */
.auth-panel {
    position: relative;
    background: radial-gradient(120% 120% at 15% 0%, var(--navy-700) 0%, var(--navy-900) 45%, var(--navy-950) 100%);
    color: var(--text-inverse);
    padding: var(--space-7) var(--space-6);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.auth-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at 30% 20%, black 0%, transparent 70%);
    pointer-events: none;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    position: relative;
    z-index: 1;
}
.auth-brand-mark {
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--royal-500), var(--royal-600));
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-lg);
    box-shadow: 0 8px 20px rgba(36,81,232,0.45);
}
.auth-brand-name {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
}

.auth-hero { position: relative; z-index: 1; max-width: 420px; }
.auth-hero .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: var(--text-xs); font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--royal-400);
    margin-bottom: var(--space-4);
}
.auth-hero .eyebrow .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 0 rgba(52,211,153,0.6);
    animation: pulseDot 2s var(--ease) infinite;
}
@keyframes pulseDot {
    0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.55); }
    70% { box-shadow: 0 0 0 8px rgba(52,211,153,0); }
    100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

.auth-hero h1 {
    color: var(--white);
    font-size: var(--text-3xl);
    margin-bottom: var(--space-3);
}
.auth-hero p { color: var(--gray-300); font-size: var(--text-base); }

/* ---- Live stat grid (signature element) ---- */
.auth-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: var(--space-7);
}
.auth-stat {
    background: rgba(10,24,48,0.55);
    backdrop-filter: blur(6px);
    padding: var(--space-4);
}
.auth-stat-value {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    color: var(--white);
    font-weight: 600;
}
.auth-stat-label {
    font-size: var(--text-xs);
    color: var(--gray-400);
    margin-top: 2px;
}

.auth-footnote {
    position: relative; z-index: 1;
    font-size: var(--text-xs);
    color: var(--gray-400);
}

/* ---- Right: form panel ---- */
.auth-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: var(--white);
}

.auth-form-wrap { width: 100%; max-width: 420px; }

.auth-form-header { margin-bottom: var(--space-6); }
.auth-form-header h2 { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.auth-form-header p { color: var(--text-secondary); font-size: var(--text-sm); }

.auth-divider {
    display: flex; align-items: center; gap: var(--space-3);
    color: var(--text-muted); font-size: var(--text-xs);
    margin: var(--space-5) 0;
}
.auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border-color);
}

.auth-role-toggle {
    display: flex;
    background: var(--gray-100);
    border-radius: var(--radius-md);
    padding: 4px;
    margin-bottom: var(--space-5);
}
.auth-role-toggle button {
    flex: 1;
    padding: 9px;
    border: none;
    background: transparent;
    border-radius: calc(var(--radius-md) - 4px);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    transition: all var(--duration-fast) var(--ease);
}
.auth-role-toggle button.active {
    background: var(--white);
    color: var(--navy-800);
    box-shadow: var(--shadow-sm);
}

.auth-switch { text-align: center; margin-top: var(--space-6); font-size: var(--text-sm); color: var(--text-secondary); }
.auth-switch a { color: var(--royal-600); font-weight: 600; }
.auth-switch a:hover { text-decoration: underline; }

.password-strength { display: flex; gap: 4px; margin-top: var(--space-2); }
.password-strength-bar { height: 4px; flex: 1; border-radius: var(--radius-full); background: var(--gray-200); transition: background var(--duration-base) var(--ease); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 960px) {
    .auth-screen { grid-template-columns: 1fr; }
    .auth-panel { padding: var(--space-5); }
    .auth-hero { max-width: 100%; }
    .auth-stats { margin-top: var(--space-5); }
}

@media (max-width: 640px) {
    .auth-panel { display: none; } /* form takes full screen on phones for speed */
    .auth-form-panel { padding: var(--space-4); min-height: 100vh; }
    .auth-form-header h2 { font-size: var(--text-xl); }
}