body {
    display: grid;
    grid-template-rows: var(--topnav-h) 1fr;
    height: 100dvh;

    > header {
        display: flex;
        align-items: center;
        justify-content: end;
        gap: var(--space-md);
        padding: 0 var(--space-lg);
        border-bottom: 1px solid var(--outline-dim);
        background: var(--surface);
        z-index: 30;
        > nav {
            display: flex;
            gap: var(--space-xs);
            a {
                display: flex;
                align-items: center;
                gap: var(--space-sm);
                padding: var(--space-sm) var(--space-md);
                border-radius: var(--radius-md);
                font-size: 0.875rem;
                font-weight: 500;
                color: var(--on-surface-dim);
                text-decoration: none;
                &.active {
                    background: var(--primary-container);
                    color: var(--primary);
                    font-weight: 700;
                }
            }
        }
        > .cta {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            height: 2.25rem;
            padding: 0 var(--space-md);
            background: var(--primary);
            color: var(--on-primary);
            border: none;
            border-radius: var(--radius-md);
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            flex-shrink: 0;
        }
    }
}

main {
    overflow-y: auto;
}

.main-content {
    padding: var(--space-md);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    align-content: start;
}

.main-content > .horizontal-group {
    grid-column: 1 / -1;
}

#orders-results {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

@media (max-width: 48em) {
    .topnav {
        padding: 0 var(--space-sm);
        gap: var(--space-xs);
    }

    .topnav > nav > a span:not(.material-symbols-outlined) {
        display: none;
    }

    .topnav > .cta span:not(.material-symbols-outlined) {
        display: none;
    }

    .topnav > .cta {
        width: 2.25rem;
        height: 2.25rem;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
    }

    .main-content {
        padding: var(--space-sm);
    }

    .topnav > h1 {
        font-size: 1rem;
    }
}