@import url("/css/modern-mobile.css") (max-width: 760px);

@layer reset, tokens, layout, interaction, experimental;

@layer tokens {
    :root {
        --oklch-bg: oklch(8% 0.015 270);
        --oklch-surface: oklch(15% 0.018 270);
        --oklch-accent: oklch(67% 0.2 285);
        --fluid-gap: clamp(12px, 1.6vw, 24px);
        --ring-size: 16px;
    }

    @supports (color: oklch(50% 0.1 200)) {
        body {
            background-color: var(--oklch-bg);
        }
    }
}

@layer layout {
    :where(.grid, .account-grid, .wide-grid) {
        container-type: inline-size;
    }

    @container (max-width: 720px) {
        :where(.grid, .account-grid, .wide-grid) {
            grid-template-columns: 1fr;
        }
    }

    @supports (grid-template-columns: subgrid) {
        .detail-grid > dd {
            display: grid;
            grid-template-columns: subgrid;
        }
    }

    :where(.card, .account-card, .table-card) {
        position: relative;
        overflow: hidden;

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: 0;
            background: radial-gradient(
                circle at calc(50% + cos(35deg) * 22%) calc(50% + sin(35deg) * 22%),
                color-mix(in oklch, var(--oklch-accent), transparent 74%),
                transparent 44%
            );
            transition: opacity 180ms ease;
        }

        &:where(:hover, :focus-within)::before {
            opacity: 1;
        }
    }
}

@layer interaction {
    :where(a, button, input, select, textarea):focus-visible {
        outline: 2px solid var(--accent, #6366f1);
        outline-offset: 3px;
    }

    :where(.nav-item, .account-nav):has(i) {
        position: relative;
    }

    @supports (animation-timeline: view()) {
        .content-header,
        .panel-title {
            animation: reveal-on-scroll linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 34%;
        }
    }

    @keyframes reveal-on-scroll {
        from {
            opacity: 0.42;
            transform: translateY(18px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @view-transition {
        navigation: auto;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 260ms;
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }
}

@layer experimental {
    @supports (anchor-name: --offline-anchor) {
        .icon-button {
            anchor-name: --offline-action-anchor;
        }

        .context-menu[data-anchor-mode="css"] {
            position-anchor: --offline-action-anchor;
            inset-area: bottom end;
        }
    }
}
@media (max-width: 900px) {
    /* Next.js 16 mounts its development trigger in a shadow-root portal. */
    nextjs-portal {
        display: none !important;
    }
}