/* main UI template */

#root {
    isolation: isolate;
    display: grid;
    block-size: 100dvh;
    overflow: hidden;
    grid-template:
        'header' auto
        'contents' 1fr
        'sidebar' auto / 1fr;

    @media (width > 52.5rem) {
        grid-template:
            'sidebar header' auto
            'sidebar contents' 1fr / auto 1fr;
    }
}

#root {
    > main {
        min-block-size: 0;
        overflow: auto;
        grid-area: contents;
        display: grid;
        gap: 0.75rem;
        padding: 0 1rem 1rem;
    }

    > header {
        grid-area: header;
        display: flex;
        justify-content: space-between;
        align-items: end;
        gap: 1rem;
        flex-wrap: wrap;
        padding: 1rem;
    }
}

#root > header h1 {
    @apply --m3-headline-large;
    color: var(--m3c-on-surface);
}

#root > header h2 {
    @apply --m3-title-medium;
    color: var(--m3c-on-surface-variant);
}

#root > header > :is(menu, div):not(:first-child) {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

#root > header > menu {
    list-style: none;
    padding: 0;
}