/* ============================================================================
   Signed-out message pages (Home/Error, Account/InviteInvalid) — MySocial.ai Design System

   These pages render with Layout = null (the app layouts assume a signed-in user with a
   subscription), so nothing from the app's CSS bundles is loaded: this file is all of it.

   ── SCOPE ─────────────────────────────────────────────────────────────────
   Tokens are declared on `.ms-error` (the <body> of those pages), names copied verbatim
   from the claude.ai/design "MySocial.ai Design System" project, same as the other
   page-level DS scopes, so the block can be deleted the day tokens go global.
   ========================================================================== */

.ms-error {
    /* ---- Brand ---- */
    --magenta-900: #5A0555;
    --magenta-700: #9A0791;
    --magenta-500: #C808BD;
    --magenta-100: #F7CCF4;
    --magenta-50: #FBE8FA;
    --violet-500: #7744D4;

    /* ---- Neutrals ---- */
    --white: #FFFFFF;
    --grey-50: #F3F4F6;
    --grey-100: #E7E9EF;
    --grey-200: #D4D7E0;
    --grey-500: #708090;
    --slate-600: #486581;
    --black: #101010;

    /* ---- Semantic ---- */
    --warning-bg: #FEF3C7;
    --error-600: #D80027;

    /* ---- Aliases ---- */
    --brand: var(--magenta-500);
    --brand-hover: var(--magenta-700);
    --surface-card: var(--white);
    --surface-subtle: var(--grey-50);
    --text-primary: var(--black);
    --text-secondary: var(--slate-600);
    --text-tertiary: var(--grey-500);
    --text-link: var(--magenta-500);
    --border-subtle: var(--grey-100);
    --border-default: var(--grey-200);

    /* ---- Type / shape / motion ---- */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;
    --shadow-sm: 0 2px 6px rgba(16,25,52,0.10);
    --shadow-md: 0 8px 24px rgba(16,25,52,0.12);
    --shadow-lg: 0 20px 48px rgba(16,25,52,0.18);
    --gradient-hero: linear-gradient(110deg, #5B0571 0%, #3A0A6B 42%, #2C2786 100%);
    --gradient-brand: linear-gradient(90deg, #C808BD 0%, #7744D4 100%);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 120ms;
    --dur-med: 200ms;

    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--gradient-hero);
    color: var(--text-primary);
    font: 15px/1.55 var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

.ms-error *,
.ms-error *::before,
.ms-error *::after { box-sizing: border-box; }

/* ── Layout: brand logo on the gradient, card below ─────────────────────── */
.ms-error .me-wrap {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/* Content/Images/Logo.png is the current mark (the app header's): white wordmark, made for dark surfaces. */
.ms-error .me-logo {
    display: block;
    height: 30px;
    width: auto;
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.ms-error .me-card {
    width: 100%;
    max-width: 520px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 32px;
}

.ms-error .me-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--magenta-50);
    color: var(--brand);
    font-size: 26px;
    margin: 0 0 16px;
}

/* Something actually failed (as opposed to "here's what to do"): warmer chip, same shape. */
.ms-error .me-icon.is-problem {
    background: var(--warning-bg);
    color: var(--error-600);
}

.ms-error .me-eyebrow {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.ms-error h1 {
    margin: 0 0 10px;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.ms-error .me-lead {
    margin: 0 0 16px;
    color: var(--text-secondary);
}

/* "What to do next" */
.ms-error .me-next {
    display: flex;
    gap: 10px;
    margin: 0 0 20px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    color: var(--text-primary);
}

.ms-error .me-next i {
    flex: none;
    margin-top: 3px;
    color: var(--brand);
    font-size: 16px;
}

.ms-error .me-ref {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 20px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--surface-subtle);
    border: 1px solid var(--border-subtle);
    font-size: 12px;
    color: var(--text-secondary);
}

.ms-error .me-ref strong {
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}

/* ── Actions ─────────────────────────────────────────────────────────────── */
.ms-error .me-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

.ms-error .me-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    background: var(--gradient-brand);
    color: var(--white);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-med) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}

.ms-error .me-btn:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.ms-error .me-btn:focus-visible,
.ms-error .me-link:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.ms-error .me-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-link);
    font-weight: 500;
    text-decoration: none;
}

.ms-error .me-link:hover { color: var(--brand-hover); text-decoration: underline; }

@media (max-width: 480px) {
    .ms-error .me-card { padding: 24px 20px; }
    .ms-error h1 { font-size: 20px; }
}