/*
  Venturly auth pages (PRO-77, Phase 8.5) — centered brand + card treatment for the anonymous
  sign-in / register / password / confirmation flows. Loaded only by _AuthLayout.cshtml, after
  theme.css (whose tokens it consumes). Presentation only; no auth-flow behaviour change.
*/

.auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ground);
    color: var(--ink);
}

/* Slim top strip carrying only the theme toggle (no marketing navbar on auth screens). */
.auth-topbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 14px 20px;
}

.auth-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 8px 20px 48px;
}

/* Brand mark + wordmark above the card, links home. */
.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
    font-weight: 650;
    font-size: 19px;
    letter-spacing: -.2px;
}

.auth-brand:hover {
    color: var(--ink);
}

.auth-card {
    width: 100%;
    max-width: 27rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 30px 30px 26px;
}

.auth-card-head {
    text-align: center;
    margin-bottom: 22px;
}

.auth-title {
    font-size: 22px;
    font-weight: 680;
    letter-spacing: -.3px;
    margin: 0;
}

.auth-subtitle {
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.5;
    margin: 7px 0 0;
}

/* Full-width primary submit reads as the card's main action. Views add .w-100 to the submit. */
.auth-card .btn-primary.w-100 {
    padding-top: .55rem;
    padding-bottom: .55rem;
}

/* Secondary in-card links (Create account / Forgot password / back), stacked and centered. */
.auth-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 18px;
    font-size: 13.5px;
}

.auth-links a {
    color: var(--accent);
    text-decoration: none;
}

.auth-links a:hover {
    text-decoration: underline;
}

/* A submit button that reads as a link. Needed because some secondary actions here must be
   real form POSTs rather than links — the Complete-profile sign-out escape (PRO-91) posts to
   Logout, which is [ValidateAntiForgeryToken]. Without this the browser's default button
   chrome would render a second solid block competing with the card's primary CTA. */
.auth-links button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--accent);
    cursor: pointer;
}

.auth-links button:hover {
    text-decoration: underline;
}

/* "or continue with" divider between the form and the provider buttons. */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 16px;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* Provider (Google / Facebook) buttons — styled but inert until PRO-18/19 wire the flows. */
.provider-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.provider-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.provider-btn:hover:not(:disabled) {
    background: var(--surface-2);
    border-color: var(--faint);
}

.provider-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.provider-btn svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.provider-note {
    text-align: center;
    color: var(--faint);
    font-size: 11.5px;
    margin: 10px 0 0;
}

.auth-foot {
    color: var(--muted);
    font-size: 12.5px;
    text-align: center;
}

.auth-foot a {
    color: var(--muted);
    text-decoration: none;
}

.auth-foot a:hover {
    color: var(--ink);
    text-decoration: underline;
}

/* Status / confirmation pages (check your email, email confirmed, link invalid, access denied):
   a centered icon glyph above the message, reusing the sprite icons. */
.auth-status-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.auth-status-icon svg {
    width: 44px;
    height: 44px;
    color: var(--accent);
}

.auth-status-icon.is-warning svg {
    color: var(--sent);
}

.auth-status-icon.is-danger svg {
    color: var(--void);
}

.auth-status-text {
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}

.auth-status-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
}