/* Atlas public and touch portals — shared visual frame. */

body.atlas-ui.atlas-portal {
    --atlas-bg: var(--atlas-surface-page);
    --atlas-card: var(--atlas-white);
    --atlas-brand: var(--atlas-brand-mark);
    --atlas-brand-dark: var(--atlas-action-hover);
    --atlas-hero: var(--atlas-shell);
    --atlas-hero-2: var(--atlas-action);
    --atlas-panel: rgba(255, 255, 255, 0.9);

    min-height: 100%;
    color: var(--atlas-text-primary);
    background-color: var(--atlas-surface-page);
    background-image:
        radial-gradient(circle at top left, rgba(42, 125, 182, 0.1), transparent 30rem),
        linear-gradient(180deg, #f8fafc 0%, var(--atlas-surface-page) 42%, #eef2f7 100%);
}

body.atlas-ui.atlas-portal :where(.card, .portal-card) {
    border: 1px solid var(--atlas-border);
    border-radius: var(--atlas-radius-card);
    background: var(--atlas-white);
    box-shadow: var(--atlas-shadow-sm);
}

body.atlas-ui.atlas-portal :where(.btn, .portal-button) {
    min-height: var(--atlas-touch-height);
    border-radius: var(--atlas-radius-control);
    font-family: var(--atlas-font-ui);
    font-weight: 700;
}

body.atlas-ui.atlas-portal .btn:not(.btn-danger):not(.btn-secondary) {
    color: var(--atlas-white);
    background: var(--atlas-action);
}

body.atlas-ui.atlas-portal .btn:not(.btn-danger):not(.btn-secondary):hover {
    background: var(--atlas-action-hover);
}

body.atlas-ui.atlas-portal :where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    button
) {
    min-height: var(--atlas-touch-height);
}

body.atlas-ui.atlas-portal > header.bg-slate-950,
body.atlas-ui.atlas-portal > header.bg-slate-900 {
    background-color: var(--atlas-shell);
}

body.atlas-ui.atlas-portal .app-shell::before {
    border-radius: var(--atlas-radius-dialog);
    background: linear-gradient(135deg, var(--atlas-shell-deep), var(--atlas-shell) 58%, var(--atlas-action));
    box-shadow: var(--atlas-shadow-md);
}

body.atlas-ui.atlas-portal :where(.app-hero, .hero-card) {
    border-radius: var(--atlas-radius-card);
}

body.atlas-ui.atlas-portal code {
    font-family: var(--atlas-font-mono);
}

@media (max-width: 639px) {
    body.atlas-ui.atlas-portal :where(.card, .portal-card) {
        box-shadow: var(--atlas-shadow-xs);
    }
}

@media print {
    body.atlas-ui.atlas-portal {
        color: #0f172a;
        background: #fff;
    }
}