/*
 * Clearli — platform-wide visual surfaces (elite pages)
 * Behavior, layout, and DOM unchanged.
 */

/* ── Page base & ambient ── */
body.elite-body {
    isolation: isolate;
    background-color: transparent;
    color: var(--text-primary);
    transition:
        background-color var(--transition-theme),
        color var(--transition-theme);
}

body.elite-body::before {
    z-index: -1;
    background-image:
        linear-gradient(180deg, var(--bg-base) 0%, rgba(255, 253, 248, 0.35) 32%, transparent 68%),
        var(--clearli-bg-image);
    background-size: cover, cover;
    background-position: center top, center bottom;
    background-repeat: no-repeat, no-repeat;
    opacity: 1;
    transition: opacity var(--transition-theme);
}

body.elite-body::after {
    z-index: -1;
    opacity: 0;
    pointer-events: none;
}

[data-theme="dark"] body.elite-body::before,
body[data-theme="dark"].elite-body::before {
    background-image:
        linear-gradient(180deg, var(--bg-base) 0%, rgba(7, 16, 31, 0.55) 38%, transparent 72%),
        var(--clearli-bg-image);
}

[data-theme="dark"] body.elite-body::after,
body[data-theme="dark"].elite-body::after {
    opacity: 0;
    pointer-events: none;
}

/* Theme transition bundle */
body.elite-body .elite-userbar,
body.elite-body .elite-userbar--app,
body.elite-body .surface-card,
body.elite-body .glass-panel,
body.elite-body .glass-panel--light,
body.elite-body .auth-card,
body.elite-body .tile,
body.elite-body .chunk-card,
body.elite-body .nav-card,
body.elite-body .modal-card,
body.elite-body .elite-modal,
body.elite-body .btn-elite,
body.elite-body .elite-toolbar-chip,
body.elite-body .elite-input,
body.elite-body .elite-select,
body.elite-body .elite-textarea,
body.elite-body .form-select,
body.elite-body .pwa-install-banner {
    transition:
        background var(--transition-theme),
        background-color var(--transition-theme),
        border-color var(--transition-theme),
        box-shadow var(--transition-theme),
        color var(--transition-theme),
        transform 0.22s var(--clearli-theme-ease),
        filter var(--transition-theme);
}

/* ── Top bar ── */
body.elite-body .elite-userbar,
body.elite-body .elite-userbar--app {
    background: var(--surface-card);
    backdrop-filter: blur(var(--clearli-glass-blur)) saturate(var(--clearli-glass-saturate));
    -webkit-backdrop-filter: blur(var(--clearli-glass-blur)) saturate(var(--clearli-glass-saturate));
    border-bottom: 1px solid var(--border-soft);
    box-shadow: var(--clearli-inset-hi), var(--shadow-soft);
}

body.elite-body .elite-toolbar-chip {
    background: rgba(255, 255, 255, 0.48);
    border-color: rgba(75, 131, 255, 0.2);
    box-shadow: var(--clearli-inset-hi), 0 1px 4px rgba(75, 131, 255, 0.08);
}

[data-theme="dark"] body.elite-body .elite-toolbar-chip,
body[data-theme="dark"].elite-body .elite-toolbar-chip {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(124, 199, 255, 0.22);
    box-shadow: var(--clearli-inset-hi), var(--glow-soft);
}

/* ── Cards & panels ── */
body.elite-body .surface-card,
body.elite-body .glass-panel,
body.elite-body .glass-panel--light,
body.elite-body .auth-card,
body.elite-body .tile,
body.elite-body .chunk-card,
body.elite-body .nav-card {
    background: var(--surface-card);
    backdrop-filter: blur(var(--clearli-glass-blur)) saturate(var(--clearli-glass-saturate));
    -webkit-backdrop-filter: blur(var(--clearli-glass-blur)) saturate(var(--clearli-glass-saturate));
    border: 1px solid var(--border-soft);
    box-shadow: var(--clearli-inset-hi), var(--shadow-soft);
}

body.elite-body .tile:hover,
body.elite-body .chunk-card:hover {
    background: var(--surface-card-hover);
    box-shadow: var(--clearli-inset-hi), var(--shadow-card);
    transform: translateY(-1px);
}

body.elite-body .nav-card:hover {
    background: var(--surface-card-hover);
    box-shadow: var(--clearli-inset-hi), var(--shadow-card), var(--glow-soft);
    transform: translateY(-1px);
}

body.elite-body .nav-card__icon {
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: var(--clearli-inset-hi), var(--shadow-soft);
}

body.elite-body .nav-card--personal {
    background: linear-gradient(135deg, rgba(103, 216, 200, 0.1) 0%, var(--surface-card) 48%);
    border-color: rgba(103, 216, 200, 0.18);
}

body.elite-body .nav-card--levels {
    background: linear-gradient(135deg, rgba(75, 131, 255, 0.11) 0%, var(--surface-card) 48%);
    border-color: rgba(75, 131, 255, 0.2);
}

body.elite-body .nav-card--game {
    background: linear-gradient(135deg, rgba(158, 125, 244, 0.1) 0%, var(--surface-card) 48%);
    border-color: rgba(158, 125, 244, 0.18);
}

body.elite-body .nav-card--level-pick {
    background: linear-gradient(135deg, rgba(244, 122, 42, 0.1) 0%, var(--surface-card) 48%);
    border-color: rgba(244, 122, 42, 0.18);
}

[data-theme="dark"] body.elite-body .nav-card__icon,
body[data-theme="dark"].elite-body .nav-card__icon {
    border-color: rgba(255, 255, 255, 0.08);
}

/* ── Buttons ── */
body.elite-body .btn-elite--primary {
    background: linear-gradient(135deg, var(--clearli-navy) 0%, #0b3a8f 52%, var(--accent-blue) 100%);
    color: #fffdf8;
    box-shadow: var(--clearli-inset-hi), 0 4px 18px rgba(75, 131, 255, 0.22);
}

body.elite-body .btn-elite--primary:hover {
    background: linear-gradient(135deg, #0b3a8f 0%, var(--accent-blue) 100%);
    box-shadow: var(--clearli-inset-hi), 0 6px 22px rgba(75, 131, 255, 0.3);
}

body.elite-body .btn-elite--ghost {
    background: var(--surface-card);
    border-color: var(--border-soft);
    box-shadow: var(--clearli-inset-hi), var(--shadow-soft);
}

body.elite-body .btn-elite--ghost:hover {
    background: var(--surface-card-hover);
    border-color: var(--border-accent);
    color: var(--accent-blue);
}

body.elite-body .btn-elite--royal {
    background: linear-gradient(135deg, #5c56c9 0%, var(--accent-purple) 48%, var(--accent-blue) 100%);
    color: #fffdf8;
    box-shadow: var(--clearli-inset-hi), 0 4px 18px rgba(158, 125, 244, 0.24);
}

body.elite-body .btn-elite--royal:hover {
    background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-blue) 100%);
    box-shadow: var(--clearli-inset-hi), 0 6px 22px rgba(158, 125, 244, 0.32);
}

body.elite-body .stat-box {
    background: var(--surface-card);
    backdrop-filter: blur(var(--clearli-glass-blur)) saturate(var(--clearli-glass-saturate));
    -webkit-backdrop-filter: blur(var(--clearli-glass-blur)) saturate(var(--clearli-glass-saturate));
    border: 1px solid var(--border-soft);
    box-shadow: var(--clearli-inset-hi), var(--shadow-soft);
}

body.elite-body .empty-state {
    background: var(--surface-card);
    border: 1px dashed var(--border-soft);
    box-shadow: var(--clearli-inset-hi), var(--shadow-soft);
}

body.elite-body .btn-elite:focus-visible,
body.elite-body .elite-input:focus,
body.elite-body .elite-select:focus,
body.elite-body .elite-textarea:focus,
body.elite-body .form-select:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: var(--focus-ring);
}

/* ── Forms ── */
body.elite-body .elite-input,
body.elite-body .elite-select,
body.elite-body .elite-textarea,
body.elite-body .form-select {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--border-soft);
    box-shadow: var(--clearli-inset-hi);
}

[data-theme="dark"] body.elite-body .elite-input,
[data-theme="dark"] body.elite-body .elite-select,
[data-theme="dark"] body.elite-body .elite-textarea,
[data-theme="dark"] body.elite-body .form-select,
body[data-theme="dark"].elite-body .elite-input,
body[data-theme="dark"].elite-body .elite-select,
body[data-theme="dark"].elite-body .elite-textarea,
body[data-theme="dark"].elite-body .form-select {
    background: rgba(255, 255, 255, 0.04);
}

/* ── Modals ── */
body.elite-body .modal-overlay,
body.elite-body .elite-modal-bg {
    background: rgba(7, 16, 31, 0.42);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

[data-theme="dark"] body.elite-body .modal-overlay,
[data-theme="dark"] body.elite-body .elite-modal-bg,
body[data-theme="dark"].elite-body .modal-overlay,
body[data-theme="dark"].elite-body .elite-modal-bg {
    background: rgba(0, 0, 0, 0.58);
}

body.elite-body .modal-card,
body.elite-body .elite-modal {
    background: var(--surface-modal);
    backdrop-filter: blur(var(--clearli-glass-blur)) saturate(var(--clearli-glass-saturate));
    -webkit-backdrop-filter: blur(var(--clearli-glass-blur)) saturate(var(--clearli-glass-saturate));
    border: 1px solid var(--border-soft);
    box-shadow: var(--clearli-inset-hi), var(--shadow-card);
}

/* ── PWA banner ── */
body.elite-body .pwa-install-banner:not(.home-strip) {
    background: var(--surface-card);
    backdrop-filter: blur(16px) saturate(var(--clearli-glass-saturate));
    -webkit-backdrop-filter: blur(16px) saturate(var(--clearli-glass-saturate));
    border: 1px solid var(--border-soft);
    box-shadow: var(--clearli-inset-hi), var(--shadow-soft);
}

/* ── Hero typography polish (non-home pages) ── */
body.elite-body .elite-hero h1,
body.elite-body .page-header h1 {
    color: var(--text-primary);
    font-weight: 650;
    letter-spacing: -0.02em;
}

body.elite-body .elite-hero p,
body.elite-body .page-header p {
    color: var(--text-secondary);
}

/* ── Pillar & category cards ── */
body.elite-body .pillar-card,
body.elite-body .cat-tile {
    background: var(--surface-card);
    backdrop-filter: blur(var(--clearli-glass-blur)) saturate(var(--clearli-glass-saturate));
    -webkit-backdrop-filter: blur(var(--clearli-glass-blur)) saturate(var(--clearli-glass-saturate));
    border: 1px solid var(--border-soft);
    box-shadow: var(--clearli-inset-hi), var(--shadow-soft);
}

body.elite-body .pillar-card:hover,
body.elite-body .cat-tile:hover {
    background: var(--surface-card-hover);
    box-shadow: var(--clearli-inset-hi), var(--shadow-card), var(--glow-soft);
}

body.elite-body .cat-tile__icon {
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: var(--clearli-inset-hi), var(--shadow-soft);
}

body.elite-body .vault-feature-card,
body.elite-body .home-strip,
body.elite-body .pwa-install-banner.home-strip {
    backdrop-filter: blur(var(--clearli-glass-blur)) saturate(var(--clearli-glass-saturate));
    -webkit-backdrop-filter: blur(var(--clearli-glass-blur)) saturate(var(--clearli-glass-saturate));
    box-shadow: var(--clearli-inset-hi), var(--shadow-soft);
}

body.elite-body .roadmap-pillar,
body.elite-body .roadmap-schedule,
body.elite-body .roadmap-goal,
body.elite-body .billing-status-card,
body.elite-body .billing-plan {
    border-color: var(--border-soft);
}

@media (prefers-reduced-transparency: reduce) {
    body.elite-body .elite-userbar,
    body.elite-body .elite-userbar--app,
    body.elite-body .surface-card,
    body.elite-body .glass-panel,
    body.elite-body .glass-panel--light,
    body.elite-body .auth-card,
    body.elite-body .tile,
    body.elite-body .chunk-card,
    body.elite-body .nav-card,
    body.elite-body .pillar-card,
    body.elite-body .cat-tile,
    body.elite-body .vault-feature-card,
    body.elite-body .roadmap-pillar,
    body.elite-body .roadmap-schedule,
    body.elite-body .roadmap-goal,
    body.elite-body .billing-status-card,
    body.elite-body .billing-plan,
    body.elite-body .modal-card,
    body.elite-body .elite-modal,
    body.elite-body .pwa-install-banner {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--card-solid);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.elite-body *,
    body.elite-body::before {
        transition-duration: 0.01ms !important;
    }
}