/* ============================================================================
   Public Dialog Styles
   Shared styles for unauthenticated / public-facing dialog pages
   (login, verification, invite acceptance, evidence request fulfilment, etc.)
   ============================================================================ */

/* Page Layout */
.page-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(25deg, var(--surface-1) 50%, var(--surface-2) 50%);
    padding: var(--space-4);
}

.login-container {
    width: 100%;
    max-width: 35rem;
}

/* Wide variant — for content-heavy pages (e.g. evidence request fulfilment) */
.login-container-wide {
    max-width: 52rem;
}

.login-card {
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-soft);
}

/* Login Header */
.login-header {
    text-align: center;
    margin-bottom: var(--space-6);
}

.login-logo {
    width: 50%;  
    margin: 0 auto var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-logo .brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.login-title {
    font-size: var(--type-size-2xl);
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 var(--space-2);
}

.login-description {
    font-size: var(--type-size-base);
    color: color-mix(in srgb, var(--text-color) 65%, var(--brand-core) 15%);
    margin: 0;
}

/* Login Form */
.login-form {
    margin-top: var(--space-6);
}

/* Login Footer */
.login-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-subtle);
}

/* Center the mode toggle button in the footer */
.login-footer .mode-toggle {
    margin: 0 auto;
}

/* Hint text below alerts/status messages */
.login-hint {
    color: color-mix(in srgb, var(--text-color) 60%, transparent);
    font-size: var(--type-size-sm);
    margin-top: var(--space-4);
    text-align: center;
}

/* Full-width action button for unauthenticated pages */
.login-action-full {
    width: 100%;
    text-align: center;
}

/* Support email link in footer */
.login-support-link {
    color: var(--brand-core);
}