/* Phase 2 product reskin: logged-in dashboard/results/upload/auth */

body.diagram-phase2 {
    --ink: #f2f4f8;
    --chalk: #05060c;
    --slate: rgba(226, 232, 240, 0.78);
    --mist: rgba(226, 232, 240, 0.14);
    --concrete: rgba(226, 232, 240, 0.55);
    --white: rgba(255, 255, 255, 0.04);
    --accent: #d94432;
    --accent-light: #e8604f;
    --accent-pale: rgba(217, 68, 50, 0.14);
    --warm: #d4a853;
    --warm-pale: rgba(212, 168, 83, 0.12);
    background: var(--chalk);
    color: var(--ink);
    position: relative;
    overflow-x: hidden;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Deep-space starfield: see /css/moonshop-space.css (body.moonshop-deep-space). */

/* Nav */
body.diagram-phase2 nav {
    background: rgba(5, 6, 12, 0.62) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.10) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Desktop: one bar — .nav-links fills width after logo so items don’t wrap to a second row */
@media (min-width: 901px) {
    body.diagram-phase2 nav .nav-links {
        flex: 1;
        min-width: 0;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 0.3rem 0.4rem;
    }

    body.diagram-phase2 nav .nav-agents {
        flex-shrink: 0;
    }

    body.diagram-phase2 nav .nav-user {
        max-width: min(200px, 26vw);
    }
}

body.diagram-phase2 .logo {
    color: var(--ink) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    text-decoration: none;
}

body.diagram-phase2 .nav-link {
    color: rgba(226, 232, 240, 0.76) !important;
}

body.diagram-phase2 .nav-link:hover,
body.diagram-phase2 .nav-link.active {
    color: var(--accent) !important;
}

body.diagram-phase2 .nav-agent {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(226, 232, 240, 0.14) !important;
    color: rgba(226, 232, 240, 0.90) !important;
}

body.diagram-phase2 .nav-agent:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

body.diagram-phase2 .nav-agent.nav-agent-soon {
    background: rgba(255, 255, 255, 0.03) !important;
    color: rgba(226, 232, 240, 0.58) !important;
}

body.diagram-phase2 .nav-user {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(226, 232, 240, 0.14);
    color: rgba(226, 232, 240, 0.86);
}

body.diagram-phase2 .nav-cta,
body.diagram-phase2 .nav-upgrade-btn,
body.diagram-phase2 .btn-primary,
body.diagram-phase2 .quota-upgrade-btn,
body.diagram-phase2 .tier-upgrade-btn {
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(217, 68, 50, 0.24);
}

body.diagram-phase2 .nav-cta:hover,
body.diagram-phase2 .nav-upgrade-btn:hover,
body.diagram-phase2 .btn-primary:hover,
body.diagram-phase2 .quota-upgrade-btn:hover,
body.diagram-phase2 .tier-upgrade-btn:hover {
    background: var(--accent-light) !important;
}

body.diagram-phase2 button.nav-logout {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(226, 232, 240, 0.16);
    color: rgba(226, 232, 240, 0.80);
}

/* Dashboard sections */
body.diagram-phase2 .dashboard,
body.diagram-phase2 main {
    color: var(--ink);
}

body.diagram-phase2 .section-desc,
body.diagram-phase2 .upload-sub,
body.diagram-phase2 .progress-text,
body.diagram-phase2 .quota-usage-text,
body.diagram-phase2 .card-unit,
body.diagram-phase2 .history-item .hi-meta,
body.diagram-phase2 .share-pct,
body.diagram-phase2 .opportunity-card .opp-detail,
body.diagram-phase2 .tier-runs,
body.diagram-phase2 .tier-features,
body.diagram-phase2 .modal-box .modal-msg,
body.diagram-phase2 .auth-card p.subtitle {
    color: var(--slate) !important;
}

/* Info callout: must not use light text on the register page’s pale blue box */
body.diagram-phase2 .firm-note {
    background: rgba(86, 145, 255, 0.14) !important;
    border: 1px solid rgba(130, 175, 255, 0.32) !important;
    color: rgba(232, 238, 247, 0.96) !important;
}

body.diagram-phase2 .upload-zone,
body.diagram-phase2 .quota-banner,
body.diagram-phase2 .modal-box,
body.diagram-phase2 .post-trial-banner,
body.diagram-phase2 .summary-card,
body.diagram-phase2 .table-wrap,
body.diagram-phase2 .opportunity-card,
body.diagram-phase2 .history-item,
body.diagram-phase2 .empty-state,
body.diagram-phase2 .auth-card,
body.diagram-phase2 .faq-item,
body.diagram-phase2 .demo-prompt {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(226, 232, 240, 0.13) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24);
}

body.diagram-phase2 .upload-zone:hover,
body.diagram-phase2 .upload-zone.dragover,
body.diagram-phase2 .summary-card:hover,
body.diagram-phase2 .history-item:hover,
body.diagram-phase2 .opportunity-card:hover {
    border-color: rgba(217, 68, 50, 0.34) !important;
}

body.diagram-phase2 .free-plan-top-banner {
    background: linear-gradient(120deg, rgba(217, 68, 50, 0.93), rgba(232, 96, 79, 0.93)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

body.diagram-phase2 .post-trial-banner {
    background: linear-gradient(120deg, rgba(217, 68, 50, 0.22), rgba(86, 145, 255, 0.18)) !important;
}

body.diagram-phase2 .post-trial-banner-cta {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #0a0f1a !important;
}

/* Results tables readability */
body.diagram-phase2 .data-table th {
    background: rgba(217, 68, 50, 0.14) !important;
    color: rgba(255, 235, 232, 0.96) !important;
    border-bottom: 1px solid rgba(217, 68, 50, 0.28);
}

body.diagram-phase2 .data-table td {
    color: rgba(241, 244, 248, 0.9) !important;
    border-top-color: rgba(226, 232, 240, 0.10) !important;
}

body.diagram-phase2 .data-table tbody tr:hover {
    background: rgba(217, 68, 50, 0.07) !important;
}

body.diagram-phase2 .share-fill {
    background: rgba(217, 68, 50, 0.96) !important;
}

body.diagram-phase2 .share-fill.warm {
    background: rgba(212, 168, 83, 0.96) !important;
}

/* Inputs / auth */
body.diagram-phase2 input[type="email"],
body.diagram-phase2 input[type="password"],
body.diagram-phase2 input[type="text"] {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(226, 232, 240, 0.16) !important;
    color: var(--ink) !important;
}

body.diagram-phase2 input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(217, 68, 50, 0.22) !important;
}

body.diagram-phase2 .error-msg {
    background: rgba(217, 68, 50, 0.14) !important;
    border-color: rgba(217, 68, 50, 0.28) !important;
    color: rgba(255, 217, 210, 0.95) !important;
}

/* Upgrade modal: keep close control above tier grid / glass surfaces */
body.diagram-phase2 #upgradeModal .modal-close {
    z-index: 6;
    pointer-events: auto;
}

/* Modal / tiers */
body.diagram-phase2 .upgrade-tier {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(226, 232, 240, 0.13) !important;
}

body.diagram-phase2 .upgrade-tier.featured {
    background: rgba(217, 68, 50, 0.14) !important;
    border-color: rgba(217, 68, 50, 0.34) !important;
}

body.diagram-phase2 .upgrade-tier.current-plan {
    background: rgba(90, 166, 103, 0.18) !important;
    border-color: rgba(90, 166, 103, 0.38) !important;
}

body.diagram-phase2 .demo-prompt a,
body.diagram-phase2 .upgrade-contact a,
body.diagram-phase2 .auth-footer a {
    color: #ff998c !important;
}

/* Footer */
body.diagram-phase2 footer {
    border-top: 1px solid rgba(226, 232, 240, 0.12) !important;
    color: rgba(226, 232, 240, 0.58) !important;
    background: transparent !important;
}

/* micro interactions */
[data-product-reveal] {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(6px);
    transition: opacity 650ms ease, transform 650ms ease, filter 650ms ease;
    pointer-events: none;
}

[data-product-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    pointer-events: auto;
}

/* ── Guided onboarding: glass card + light text (dashboard tokens would be illegible on chalk) ── */
body.diagram-phase2 .onboarding-panel {
    --ob-ink: rgba(245, 247, 251, 0.98);
    --ob-slate: rgba(226, 232, 240, 0.88);
    --ob-concrete: rgba(226, 232, 240, 0.58);
    --ob-muted: rgba(226, 232, 240, 0.72);
    --ob-rule: rgba(226, 232, 240, 0.16);
    --ob-surface: rgba(255, 255, 255, 0.06);
    --ob-ghost-bg: rgba(255, 255, 255, 0.05);
    --ob-note-bg: rgba(217, 68, 50, 0.12);
    --ob-note-border: rgba(217, 68, 50, 0.38);
    background: var(--ob-surface) !important;
    border: 1px solid rgba(226, 232, 240, 0.14) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

body.diagram-phase2 .onboarding-panel .onboarding-body strong {
    color: var(--ob-ink) !important;
}

body.diagram-phase2 .onboarding-panel .onboarding-actions .btn-ghost {
    border-color: rgba(226, 232, 240, 0.24) !important;
}

body.diagram-phase2 .onboarding-panel .onboarding-actions .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(226, 232, 240, 0.35) !important;
    color: #fff !important;
}

body.diagram-phase2 .onboarding-panel .onboarding-note strong {
    color: rgba(255, 235, 232, 0.98) !important;
}

@media (prefers-reduced-motion: reduce) {
    body.diagram-phase2 [data-product-reveal] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        pointer-events: auto !important;
    }
}