/* ==========================================================================
   Shared Layouts
   ========================================================================== */
:where(.layout-minimal) {
    > .container {
        > .actions {
            display: grid;
            row-gap: 16px;
        }

        > .fields {
            display: grid;
            row-gap: 24px;
        }

        > .header {
            display: grid;
            row-gap: 12px;

            > h1 {
                justify-self: center;
                letter-spacing: normal;

                @media (width < 600px) and (orientation: portrait), (height < 480px) and (orientation: landscape) {
                    font: var(--font-headline-lg);
                }

                @media (600px <= width) and (orientation: portrait), (480px <= height) and (orientation: landscape) {
                    font: var(--font-display-sm);
                }
            }

            > p {
                color: var(--color-on-surface-variant);
                justify-self: center;
                text-wrap: pretty;
            }
        }
    }
}




/* ==========================================================================
   Minimal Layouts
   ========================================================================== */
.layout-minimal {
    display: grid;
    min-block-size: 100dvb;
    place-content: safe center;

    > .container {
        display: grid;
        grid-template-columns: minmax(auto, 480px);
        padding: 24px;
        row-gap: 32px;
    }
}




/* ==========================================================================
   Authenticated Layouts
   ========================================================================== */
.layout-app {
    display: grid;
    min-block-size: 100dvb;

    > .body {
        display: grid;
        grid-area: body;
        grid-template-columns: minmax(auto, 840px);
        place-content: start center;
        row-gap: 32px;
    }

    @media (width < 600px) and (orientation: portrait), (height < 480px) and (orientation: landscape) {
        grid-template:
            "header" 64px
            "body" 1fr;

        > .body {
            padding: 16px;
        }

        > .header {
            display: grid;
            gap: 0 8px;
            grid-area: header;
            grid-template: "leading content trailing" 40px / 40px max-content 40px;
            padding-inline: 8px;
            place-content: center space-between;

            .branding {
                fill: var(--color-on-surface);
                grid-area: content;
                place-self: center;
            }

            .navigation-affordance {
                grid-area: leading;
            }

            .user-avatar {
                grid-area: trailing;

                svg {
                    circle {
                        fill: var(--color-branding-coral);
                    }

                    text {
                        fill: #FFF;
                        font-weight: 600;
                    }
                }
            }
        }
    }

    @media (600px <= width) and (orientation: portrait), (480px <= height) and (orientation: landscape) {
        grid-template: "sidebar body" / 80px 1fr;

        > .body {
            padding: 24px;
        }

        > .header {
            display: none;
        }

        @media (860px <= width) {
            grid-template-columns: 280px 1fr;
        }
    }
}




/* ==========================================================================
   Sidebar
   ========================================================================== */
#sidebar {
    background-color: var(--color-surface-container-high);
    block-size: unset;
    border: none;
    contain: strict;
    inset: unset;
    inset-block: 0;
    inset-inline-start: 0;
    scrollbar-width: thin;

    > .container {
        block-size: 100%;
        display: grid;
        grid-template:
            "header" 64px
            "."
            "nav" 1fr
            "."
            "footer";

        > footer {
            grid-area: footer;
            padding: 8px 12px;

            .user-affordance {
                anchor-name: --user-sheet-anchor;
                appearance: none;
                background: none;
                block-size: 56px;
                border: none;
                border-radius: 100px;
                color: var(--color-on-surface);
                contain: strict;
                display: grid;
                fill: var(--color-on-surface-variant);
                font: inherit;
                gap: 0 12px;
                inline-size: 100%;
                letter-spacing: inherit;
                grid-template: "leading content trailing" / 32px 1fr 24px;
                outline: none;
                padding-inline: 12px;
                place-content: center stretch;
                text-align: inherit;
                user-select: none;

                &:enabled {
                    &:hover::after {
                        opacity: .08;
                    }

                    &:is(:active, :focus-visible)::after {
                        opacity: .12;
                    }
                }

                &::after {
                    background-color: var(--state-layer-color);
                    content: '';
                    inset: 0;
                    opacity: 0;
                    pointer-events: none;
                    position: absolute;
                    transition: opacity 200ms var(--easing-expressive-effects-default);
                }

                .avatar {
                    align-self: center;
                    grid-area: leading;

                    circle {
                        fill: var(--color-branding-coral);
                    }

                    text {
                        fill: var(--color-on-primary);
                        font-weight: 600;
                    }
                }

                .content {
                    display: grid;
                    grid-area: content;

                    .label {
                        font: var(--font-label-lg);
                        letter-spacing: .1px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .supporting-text {
                        color: var(--color-on-surface-variant);
                        font: var(--font-body-sm);
                        letter-spacing: .4px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }

                .trailing {
                    align-items: center;
                    display: flex;
                    grid-area: trailing;
                    padding-inline-end: 4px;
                }

                > :nth-child(n + 1) {
                    pointer-events: none;
                }
            }
        }

        > header {
            block-size: 64px;
            display: grid;
            grid-area: header;
            grid-template: "branding trailing" 40px / calc(24px * 142.5 / 34) 40px;
            padding-inline: 28px 12px;
            place-content: center space-between;

            .branding {
                fill: var(--color-on-surface);
                display: block;
                grid-area: branding;
            }

            .toggle-affordance {
                grid-area: trailing;
            }
        }

        > hr {
            margin: 0 20px;
        }

        > nav {
            grid-area: nav;
            padding: 12px;

            a {
                block-size: 56px;
                border-radius: 100px;
                color: var(--color-on-surface-variant);
                contain: strict;
                display: grid;
                font: var(--font-label-lg);
                gap: 0 8px;
                grid-template: "leading label" 24px / 24px 1fr;
                letter-spacing: .1px;
                outline: none;
                padding-inline: 16px;
                place-content: center stretch;
                text-decoration: none;
                transition: background-color 200ms var(--easing-expressive-effects-default), color 200ms var(--easing-expressive-effects-default);
                user-select: none;

                &[aria-disabled="true"] {
                    color: var(--color-on-surface-opacity38);
                    interactivity: inert;
                }

                &:not([aria-disabled="true"]) {
                    &:hover::after {
                        opacity: .08;
                    }

                    &:is(:active, :focus-visible)::after {
                        opacity: .12;
                    }

                    &[aria-current="page"] {
                        --state-layer-color: var(--color-on-secondary-container);
                        background-color: color-mix(in oklab, #ffddb6, #E5C18D);
                        color: var(--color-on-secondary-container);
                        fill: var(--color-secondary);
                    }
                }

                &::after {
                    background-color: var(--state-layer-color);
                    content: '';
                    inset: 0;
                    opacity: 0;
                    pointer-events: none;
                    position: absolute;
                    transition: opacity 200ms var(--easing-expressive-effects-default);
                }

                span {
                    grid-area: label;
                    line-height: 1.5rem;
                }

                svg {
                    grid-area: leading;
                }
            }
        }
    }

    @media (width < 600px) and (orientation: portrait), (height < 480px) and (orientation: landscape) {
        inline-size: 280px;
        transition: display 350ms allow-discrete, overlay 350ms allow-discrete, translate 350ms var(--easing-standard-spatial-fast);
        translate: -100%;

        &:popover-open {
            transition: translate 350ms;
            translate: none;

            &::backdrop {
                backdrop-filter: blur(2px) grayscale(.5);
                opacity: unset;

                @starting-style {
                    opacity: 0;
                }
            }

            @starting-style {
                translate: -100%;
            }
        }

        &::backdrop {
            background-color: rgb(0 0 0 / 32%);
            opacity: 0;
            transition: opacity 350ms;
        }
    }

    @media (600px <= width) and (orientation: portrait), (480px <= height) and (orientation: landscape) {
        display: block;

        @media (width < 860px) {
            contain: layout paint style;
            z-index: 16;

            &:popover-open {
                > .container {
                    > footer {
                        .user-affordance {
                            grid-template-columns: 32px 176px 24px;
                        }
                    }

                    > header {
                        grid-template-columns: 8px 208px 40px;
                    }

                    > nav {
                        a {
                            grid-template-columns: 24px 200px;
                        }
                    }
                }
            }

            > .container {
                > footer {
                    .user-affordance {
                        gap: 0;
                        grid-template-columns: 32px 0 0;
                        transition: grid-template-columns 350ms var(--easing-standard-spatial-fast);

                        .content {
                            padding-inline: 12px;
                        }
                    }
                }

                > header {
                    grid-template: ". branding trailing" 40px / 8px 0 40px;
                    justify-content: stretch;
                    padding-inline: 12px;
                    transition: grid-template-columns 350ms var(--easing-standard-spatial-fast);

                    .branding {
                        overflow: hidden;
                        padding-inline-start: 8px;

                        svg {
                            inline-size: calc(24px * 142.5 / 34);
                        }
                    }
                }

                > nav {
                    a {
                        gap: 0;
                        grid-template-columns: 24px 0;
                        transition: grid-template-columns 350ms var(--easing-standard-spatial-fast);

                        span {
                            overflow-inline: clip;
                            padding-inline-start: 8px;
                        }
                    }
                }
            }
        }

        @media (860px <= width) {
            inline-size: 280px;
            inset-block: 0;
            inset-inline-start: 0;

            > .container {
                header {
                    .toggle-affordance {
                        display: none;
                    }
                }
            }
        }
    }
}




/* ==========================================================================
   User Sheet
   ========================================================================== */
#user-sheet {
    background-color: var(--color-surface-container-high);
    border: none;
    contain: layout paint style;

    > header {
        svg {
            text {
                fill: #FFF;
                font: var(--font-title-md);
            }
        }
    }

    > hr {
        margin: 4px 16px;
    }

    @media (width < 600px) and (orientation: portrait), (height < 480px) and (orientation: landscape) {
        border-radius: 16px;
        margin: auto;
        max-inline-size: min(560px, calc(100dvi - 64px));
        min-inline-size: 280px;
        opacity: 0;
        transition: display 150ms allow-discrete, opacity 150ms var(--easing-expressive-effects-fast), overlay 150ms allow-discrete;

        &:popover-open {
            opacity: unset;
            transition: display 150ms allow-discrete, opacity 150ms var(--easing-expressive-effects-fast), overlay 150ms allow-discrete, scale 350ms var(--easing-expressive-spatial-fast);

            &::backdrop {
                backdrop-filter: blur(2px) grayscale(.5);
                opacity: unset;

                @starting-style {
                    opacity: 0;
                }
            }

            @starting-style {
                opacity: 0;
                scale: .8;
            }
        }

        &::backdrop {
            background-color: rgb(0 0 0 / 32%);
            opacity: 0;
            transition: display 150ms allow-discrete, opacity 150ms linear, overlay 150ms allow-discrete;
        }
    }

    @media (600px <= width) and (orientation: portrait), (480px <= height) and (orientation: landscape) {
        border-radius: 16px;
        box-shadow: var(--elevation-3);
        position-anchor: --user-sheet-anchor;
        position-area: block-start span-inline-end;
        transform-origin: left bottom;

        &:popover-open {
            transition: opacity 150ms var(--easing-expressive-effects-fast), scale 350ms var(--easing-expressive-spatial-fast);

            @starting-style {
                opacity: 0;
                scale: .8;
            }
        }
    }
}




/* ==========================================================================
   Page Components
   ========================================================================== */
.page-header {
    display: grid;
    row-gap: 16px;

    > .headline {
        letter-spacing: normal;

        @media (width < 600px) and (orientation: portrait), (height < 480px) and (orientation: landscape) {
            font: var(--font-headline-sm);
        }

        @media (600px <= width) and (orientation: portrait), (480px <= height) and (orientation: landscape) {
            font: var(--font-headline-md);
        }
    }
}

.page-tabs {
    border-block-end: thin solid var(--color-outline-variant);
    contain: strict;
    container-type: scroll-state;
    display: grid;
    grid-template: "content" 48px;
    margin-block-start: -16px;
    overflow-inline: auto;
    overscroll-behavior: none;
    scrollbar-width: none;
    scroll-snap-type: inline proximity;

    > nav {
        display: grid;
        grid-area: content;
        grid-auto-flow: column;
        grid-template-rows: 48px;

        &:has(a:nth-of-type(5):last-of-type) {
            &::after,
            a:last-of-type {
                grid-column: 5;
                grid-row: 1;
            }
        }

        &::before,
        a:first-of-type {
            grid-column: 1;
            grid-row: 1;
        }

        &::before {
            aspect-ratio: 1;
            background: linear-gradient(to right, var(--color-surface) 40%, transparent);
            block-size: 100%;
            content: '';
            inset-block: 0;
            inset-inline-start: 0;
            position: sticky;
            visibility: hidden;
            z-index: 1;
        }

        &::after {
            aspect-ratio: 1;
            background: linear-gradient(to left, var(--color-surface) 40%, transparent);
            block-size: 100%;
            content: '';
            inset-block: 0;
            inset-inline-end: 0;
            justify-self: end;
            position: sticky;
            visibility: hidden;
        }

        > a {
            color: var(--color-on-surface-variant);
            contain: layout paint style;
            display: grid;
            font: var(--font-label-lg);
            grid-row: 1;
            letter-spacing: .1px;
            padding-inline: 16px;
            place-content: center;
            scroll-snap-align: start;
            text-decoration: none;
            transition: color 200ms var(--easing-expressive-effects-default);
            white-space: nowrap;

            &:not([aria-disabled="true"]) {
                &:where(:active, :focus-visible, :hover) {
                    color: var(--color-on-surface);
                }

                &:hover::after {
                    opacity: .08;
                }

                &:is(:active, :focus-visible)::after {
                    opacity: .12;
                }
            }

            &[aria-current="page"] {
                border-block-end: 3px solid currentColor;
                border-block-start: 3px solid transparent;
                color: var(--color-primary);
            }

            &::after {
                background-color: var(--state-layer-color);
                content: '';
                inset: 0;
                opacity: 0;
                pointer-events: none;
                position: absolute;
                transition: opacity 200ms var(--easing-expressive-effects-default);
            }
        }
    }

    > .back-affordance {
        align-self: center;
        grid-area: content;
        inset-inline-start: 0;
        position: sticky;
        visibility: hidden;
        z-index: 2;
    }

    > .next-affordance {
        grid-area: content;
        inset-inline-end: 0;
        place-self: center end;
        position: sticky;
        visibility: hidden;
        z-index: 2;
    }

    @media(pointer: fine) {
        scroll-padding-inline: 48px;

        @container scroll-state(scrollable: inline-end) {
            nav::after,
            .next-affordance {
                visibility: visible;
            }
        }

        @container scroll-state(scrollable: inline-start) {
            nav::before,
            .back-affordance {
                visibility: visible;
            }
        }
    }
}