/*
 * Public shell release hardening.
 * This file intentionally loads after the existing public generations.
 */

:root {
    --tnx-drawer-width: min(380px, calc(100vw - 18px));
}

.tna-menu-backdrop {
    display: block;
    pointer-events: none;
    background:
        radial-gradient(circle at 78% 18%, rgba(var(--tnx-secondary-rgb), .12), transparent 34%),
        rgba(0, 4, 14, .72);
    backdrop-filter: blur(12px) saturate(115%);
}

body.has-open-menu .tna-menu-backdrop {
    pointer-events: auto;
}

.tna-site-drawer {
    width: var(--tnx-drawer-width);
    max-width: 100vw;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    box-shadow: -30px 0 90px rgba(0, 0, 0, .44);
    transition:
        transform .24s cubic-bezier(.2, .8, .2, 1),
        opacity .18s ease,
        visibility 0s linear .24s;
}

html[dir="ltr"] .tna-site-drawer {
    box-shadow: 30px 0 90px rgba(0, 0, 0, .44);
}

.tna-site-drawer.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
}

body.has-open-menu .tna-main,
body.has-open-menu .tna-site-footer {
    pointer-events: none;
    user-select: none;
}

.tna-site-drawer__head {
    position: sticky;
    inset-block-start: calc(-1 * max(18px, env(safe-area-inset-top)));
    z-index: 2;
    margin: calc(-1 * max(18px, env(safe-area-inset-top))) -18px 0;
    padding: max(18px, env(safe-area-inset-top)) 18px 14px;
    background: color-mix(in srgb, var(--tnx-surface-strong) 97%, transparent);
    backdrop-filter: blur(18px) saturate(125%);
}

.tna-site-drawer__nav a,
.tna-site-drawer__ecosystem a,
.tna-site-drawer__actions a,
.tna-site-drawer__actions button,
.tna-site-drawer__map-link {
    min-height: 44px;
    border-radius: 14px;
}

.tna-site-drawer__ecosystem a {
    min-height: 54px;
}

.tna-site-drawer__ecosystem {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tna-site-drawer__ecosystem a {
    min-width: 0;
}

.tna-site-drawer__ecosystem b,
.tna-site-drawer__ecosystem small {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The mobile drawer and desktop navigation may never coexist. */
@media (min-width: 1200px) {
    .tna-site-drawer,
    .tna-menu-backdrop {
        display: none !important;
    }

    body.has-open-menu {
        overflow: auto !important;
    }

    body.has-open-menu .tna-main,
    body.has-open-menu .tna-site-footer {
        pointer-events: auto;
        user-select: auto;
    }
}

@media (max-width: 1199px) {
    .tna-site-drawer {
        display: grid !important;
    }

    .tna-menu-backdrop {
        display: block !important;
    }
}

@media (max-width: 640px) {
    :root {
        --tnx-drawer-width: 100vw;
    }

    .tna-site-drawer {
        border-inline-start: 0;
        padding-inline: 14px;
    }

    .tna-site-drawer__head {
        margin-inline: -14px;
        padding-inline: 14px;
    }

    .tna-site-drawer__ecosystem {
        grid-template-columns: 1fr;
    }
}

/* High-contrast light theme instead of a washed-out dark-theme inversion. */
html[data-tna-theme="light"] body.tna-galaxy {
    background-color: #edf4ff !important;
    background-image:
        radial-gradient(circle at 12% 8%, rgba(28, 144, 255, .24), transparent 30%),
        radial-gradient(circle at 88% 16%, rgba(124, 85, 255, .2), transparent 32%),
        radial-gradient(circle at 52% 72%, rgba(245, 181, 40, .16), transparent 36%),
        linear-gradient(180deg, #f9fbff 0%, #eef5ff 48%, #e8f0ff 100%) !important;
    background-attachment: fixed;
}

html[data-tna-theme="light"] .tna-space {
    opacity: .74;
    filter: saturate(135%) contrast(108%);
    mix-blend-mode: multiply;
}

html[data-tna-theme="light"] .tna-network-canvas {
    opacity: .42;
    filter: saturate(155%) contrast(112%);
    mix-blend-mode: multiply;
}

html[data-tna-theme="light"] .tna-site-nav,
html[data-tna-theme="light"] .tna-site-drawer,
html[data-tna-theme="light"] .tna-site-ecosystem__panel,
html[data-tna-theme="light"] .tna-site-user__panel {
    background:
        linear-gradient(135deg, rgba(var(--brand-accent-rgb), .11), transparent 38%),
        rgba(255, 255, 255, .94);
    border-color: rgba(36, 58, 94, .16);
    box-shadow: 0 22px 65px rgba(37, 75, 137, .16);
}

html[data-tna-theme="light"] .tna-menu-backdrop {
    background: rgba(34, 54, 87, .38);
}

html[data-tna-theme="light"] :is(
    .tnx-journey li,
    .tnx-engine,
    .tnx-brand-card,
    .tnx-course-main,
    .tnx-enrollment-panel,
    .tna-card,
    .tna-site-footer__callout
) {
    border-color: rgba(36, 58, 94, .14);
    background-color: rgba(255, 255, 255, .76);
    box-shadow: 0 20px 55px rgba(37, 75, 137, .1);
}

html[data-tna-theme="light"] .tnx-ecosystem-scene::before {
    background:
        radial-gradient(circle, rgba(var(--home-secondary-rgb), .32), transparent 58%),
        repeating-radial-gradient(circle, transparent 0 34px, rgba(34, 72, 126, .12) 35px 36px);
}

html[data-tna-theme="light"] .tnx-ecosystem-scene__core {
    box-shadow:
        0 38px 78px rgba(37, 75, 137, .25),
        0 0 90px rgba(var(--home-secondary-rgb), .28),
        inset -22px -28px 46px rgba(17, 43, 82, .14);
}

html[data-tna-theme="light"] .tnx-service-node {
    background: rgba(255, 255, 255, .9);
    box-shadow:
        0 20px 48px rgba(37, 75, 137, .14),
        0 0 34px color-mix(in srgb, var(--node-accent) 20%, transparent);
}

@media (max-width: 1199px), (pointer: coarse) {
    html[data-tna-theme="light"] body.tna-galaxy {
        background-attachment: scroll;
    }
}