/* ==========================================================================
   Autosuggest
   ========================================================================== */
@media (width < 600px) and (orientation: portrait), (height < 480px) and (orientation: landscape) {
    html:has(.autosuggest-dialog:modal) {
        overflow: clip;
    }

    .autosuggest-dialog {
        background-color: var(--color-surface-container-high);
        block-size: unset;
        border: none;
        contain: strict;
        inline-size: unset;
        inset: 0;
        max-block-size: unset;
        max-inline-size: unset;
        opacity: 0;
        transition: display 200ms allow-discrete, opacity 150ms var(--easing-expressive-effects-fast), overlay 200ms allow-discrete, translate 200ms cubic-bezier(.3, 0, .8, .15);
        translate: 0 100%;
        will-change: opacity, scale;

        &:modal {
            opacity: unset;
            transition: opacity 200ms var(--easing-expressive-effects-default), translate 350ms var(--easing-standard-spatial-fast);
            translate: none;

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

        &::backdrop {
            display: none;
        }

        > .container {
            display: grid;
            grid-template:
                "header" 72px
                "list" 1fr;

            > .header {
                display: grid;
                gap: 0 8px;
                grid-area: header;
                grid-template: "leading input trailing" 40px / 40px 1fr;
                padding-inline: 8px;
                place-content: center stretch;

                > .back-affordance {
                    grid-area: leading;
                }

                > .clear-affordance {
                    grid-area: trailing;

                    :has(input:placeholder-shown) > & {
                        visibility: hidden;
                    }
                }

                > .input {
                    appearance: none;
                    background: none;
                    border: none;
                    color: var(--color-on-surface);
                    font: inherit;
                    grid-area: input;
                    letter-spacing: inherit;
                    outline: none;

                    &::placeholder {
                        color: var(--color-neutral60);
                        opacity: unset;
                    }
                }
            }

            > .listbox {
                animation: fade-in 150ms var(--easing-expressive-effects-fast);
                border-block-start: 1px solid var(--color-outline);
                grid-area: list;

                > .option {
                    contain: layout paint style;
                    fill: var(--color-on-surface-variant);
                    user-select: none;

                    @media (hover: hover) {
                        &:hover::after {
                            opacity: .08;
                        }
                    }

                    &:is(:active, [aria-selected="true"])::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);
                    }

                    > .container {
                        display: grid;
                        gap: 0 12px;
                        grid-template: "leading content" / 20px 1fr;
                        padding: 10px 16px;
                        place-content: center stretch;
                        pointer-events: none;

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

                            .supporting-text {
                                color: var(--color-on-surface-variant);
                                font: var(--font-body-md);
                                letter-spacing: .25px;
                            }
                        }

                        > .leading {
                            display: flex;
                            grid-area: leading;
                            place-self: center;
                        }
                    }
                }
            }
        }
    }
}

@media (600px <= width) and (orientation: portrait), (480px <= height) and (orientation: landscape) {
    .autosuggest-listbox {
        background-color: var(--color-surface-container-low);
        border: none;
        border-radius: 16px;
        box-shadow: var(--elevation-3);
        min-inline-size: anchor-size(width);
        padding-block: 2px;
        position-area: block-end span-inline-end;
        position-try-fallbacks: flip-block;

        > .option {
            contain: layout paint style;

            &:nth-child(1 of .option) {
                &::after {
                    border-start-end-radius: 12px;
                    border-start-start-radius: 12px;
                }
            }

            &:nth-last-child(1 of .option) {
                &::after {
                    border-end-end-radius: 12px;
                    border-end-start-radius: 12px;
                }
            }

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

            &:is(:active, [aria-selected="true"])::after {
                opacity: .12;
            }

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

            > .container {
                block-size: 48px;
                display: grid;
                gap: 0 8px;
                grid-template: "leading content" / 20px 1fr;
                padding-inline: 16px;
                place-content: center stretch;
                pointer-events: none;

                > .content {
                    display: grid;

                    > .label {
                        font: var(--font-label-lg);
                        letter-spacing: .1px;
                    }

                    > .supporting-text {
                        color: var(--color-on-surface-variant);
                        font: var(--font-body-sm);
                        letter-spacing: .4px;
                    }
                }

                > .leading {
                    display: flex;
                    fill: var(--color-on-surface-variant);
                    grid-area: leading;
                    place-self: center;
                }
            }
        }
    }
}




/* ==========================================================================
   Address Comparison
   ========================================================================== */
.address-comparison {
    display: grid;
    row-gap: 16px;

    > .entry {
        &:nth-child(n + 2 of .entry) {
            border-block-start: thin solid var(--color-outline-variant);
            padding-block: 16px;
        }

        dt {
            color: var(--color-on-surface-variant);
            font: var(--font-label-lg);
            letter-spacing: .1px;
        }
    }
}




/* ==========================================================================
   Cards
   ========================================================================== */
@property --card-container-background-color {
    syntax: "<color>";
    inherits: true;
    initial-value: white;
}

@property --card-style {
    syntax: "<custom-ident>";
    inherits: true;
    initial-value: outlined;
}

.card {
    background-color: var(--card-container-background-color);
    border-radius: 12px;
    contain: paint style;

    &:is(details) {
        &:open {
            &::details-content {
                block-size: auto;
            }

            > summary > .expand-icon > svg {
                rotate: 180deg;
            }
        }

        &::details-content {
            block-size: 0;
            overflow: clip;
            transition: block-size 200ms var(--easing-expressive-effects-default), content-visibility 200ms allow-discrete;
        }

        > summary {
            contain: layout paint style;
            display: grid;
            gap: 0 16px;
            grid-template: "leading content trailing" / max-content 1fr max-content;
            outline: none;
            padding: 16px;

            @media (hover: hover) {
                &: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);
            }

            > .content {
                display: grid;
                grid-area: content;
                place-content: center stretch;
                pointer-events: none;
                user-select: none;

                &:first-child {
                    grid-column-start: leading;
                }

                .headline {
                    font: var(--font-title-md);
                    letter-spacing: .15px;
                }

                .overline {
                    color: var(--color-on-surface-variant);
                    font: var(--font-label-md);
                    letter-spacing: .5px;
                }

                .supporting-text {
                    color: var(--color-on-surface-variant);
                    font: var(--font-body-md);
                    letter-spacing: .25px;
                }
            }

            > .expand-icon {
                border-radius: 12px;
                display: grid;
                fill: var(--color-on-surface-variant);
                grid-auto-flow: column;
                grid-column: trailing-start / trailing-end;
                grid-row: 1;
                place-content: center;
                place-self: center end;
                pointer-events: none;
                user-select: none;

                &:has(> span) {
                    background-color: var(--color-secondary-container);
                    color: var(--color-on-secondary-container);
                    fill: var(--color-secondary);
                    padding-inline: 8px 6px;
                }

                > span {
                    align-self: center;
                    font: var(--font-label-lg);
                    letter-spacing: .1px;
                }

                > svg {
                    transform-origin: center;
                    transition: rotate 350ms var(--easing-expressive-spatial-fast);
                }
            }

            > .monogram {
                align-items: center;
                align-self: center;
                aspect-ratio: 1;
                block-size: 40px;
                border-radius: 100px;
                display: flex;
                grid-area: leading;
                justify-content: center;
                pointer-events: none;

                &.bg-coral {
                    background-color: var(--color-branding-coral);
                    fill: #FFF;
                }

                &.bg-disabled {
                    background-color: var(--color-on-surface-opacity10);
                    fill: var(--color-on-surface-variant);
                }

                &.bg-navy {
                    background-color: #080C55;
                    fill: #FFF;
                }

                &.bg-teal {
                    background-color: var(--color-branding-teal);
                    fill: #FFF;
                }
            }
        }

        > .supporting-text {
            color: var(--color-on-surface-variant);
            font: var(--font-body-md);
            letter-spacing: .25px;
            padding: 16px;
            text-align: center;
        }
    }

    > .actions {
        display: grid;
        gap: 8px;
        grid-auto-flow: column;
        padding: 16px;
        place-content: stretch end;
    }

    @container style(--card-style: outlined) {
        --card-container-background-color: var(--color-surface-container-lowest);
        outline: 1px solid var(--color-on-surface-opacity10);
        outline-offset: -1px;
    }
}

.card-group {
    > hgroup {
        align-content: center;
        min-block-size: 56px;

        > h2 {
            font: var(--font-title-md);
            letter-spacing: .15px;
        }
    }
}

.card-instrument {
    > hr {
        margin-inline: 16px;
    }

    > .items {
        counter-reset: instrument-items;
        padding: 16px;

        .list-item {
            --list-item-state-layer-inset: 0 -16px 0 -16px;
            counter-increment: instrument-items;
            margin-inline: -16px;

            > .container > .content,
            > .content {
                .badge {
                    background-color: var(--color-secondary-container);
                    border-radius: 4px;
                    color: var(--color-on-secondary-container);
                    font: var(--font-label-sm);
                    justify-self: start;
                    letter-spacing: .5px;
                    margin-block-end: 2px;
                    padding-inline: 4px;
                }

                .label {
                    font: var(--font-body-md);
                    letter-spacing: .25px;
                    text-wrap: pretty;
                }
            }

            > .container > .leading,
            > .leading {
                align-items: center;
                display: flex;
                justify-content: center;

                &::before {
                    align-items: center;
                    block-size: 20px;
                    border: 2px solid var(--color-on-surface-variant);
                    border-radius: 100px;
                    color: var(--color-on-surface-variant);
                    content: counter(instrument-items);
                    display: flex;
                    font: var(--font-label-md);
                    font-weight: 600;
                    inline-size: 20px;
                    justify-content: center;
                }
            }
        }

        .list-separated {
            > .list-item {
                border-block-color: transparent;

                &:nth-child(n + 2 of .list-item) {
                    &::before {
                        border-block-start: thin solid var(--color-outline-variant);
                        content: '';
                        grid-column: leading / trailing;
                        grid-row: 1;
                    }
                }
            }
        }

        > hgroup {
            display: grid;
            margin-block-end: 8px;

            > .label {
                display: inline-block;
                font: var(--font-title-lg);
                letter-spacing: normal;
            }

            > .supporting-text {
                color: var(--color-on-surface-variant);
                display: inline-block;
                font: var(--font-body-md);
                letter-spacing: .25px;
            }
        }
    }

    > .severity-bands {
        display: grid;
        gap: 16px;
        padding: 16px;

        > .caption {
            > .label {
                display: block;
                font: var(--font-title-lg);
                letter-spacing: normal;
            }

            > .supporting-text {
                color: var(--color-on-surface-variant);
                display: inline-block;
                font: var(--font-body-md);
                letter-spacing: .25px;
            }
        }

        > .ladder {
            display: grid;

            > li {
                list-style: none;
            }

            > .band {
                align-items: center;
                align-content: center;
                color: var(--color-on-surface-variant);
                display: grid;
                gap: 0 8px;
                grid-template: "swatch label values" 40px / 52px max-content max-content;

                &:first-child {
                    > .swatch {
                        border-start-end-radius: 12px;
                        border-start-start-radius: 12px;
                    }
                }

                &:last-child {
                    > .swatch {
                        border-end-end-radius: 12px;
                        border-end-start-radius: 12px;
                    }
                }

                &.refused {
                    > .swatch {
                        background-color: var(--color-on-surface-opacity10);
                    }
                }

                .band + & {
                    margin-block-start: 2px;
                }

                > .label {
                    font: var(--font-label-md);
                    grid-area: label;
                    letter-spacing: .5px;
                }

                > .swatch {
                    aspect-ratio: 1;
                    background-color: var(--color-secondary-container);
                    block-size: 100%;
                    border-radius: 4px;
                    grid-area: swatch;
                    justify-self: center;
                }

                > .values {
                    font: var(--font-body-sm);
                    grid-area: values;
                    letter-spacing: .4px;
                }
            }

            > .ceiling {
                background-color: var(--color-secondary);
                block-size: 4px;
                border-radius: 100px;
                inline-size: 52px;
                margin-block: 6px;

                &:first-child {
                    margin-block-start: unset;
                }
            }
        }
    }
}

.card-list {
    display: grid;
    gap: 16px;

    > li {
        list-style: none;
    }
}

:is(#services) .card-list, #instruments {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}




/* ==========================================================================
   Dialogs
   ========================================================================== */
.dialog-adaptive {
    background-color: var(--color-surface-container-high);
    border: none;

    > .container {
        container-type: scroll-state;
        overflow-block: auto;
        scroll-padding-block: 88px 80px;
        scrollbar-width: thin;

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

            > hr {
                margin: unset;
            }

            > .list-standard {
                margin-inline: -16px;
            }
        }

        > .header {
            background-color: var(--color-surface-container-high);
            display: grid;
            gap: 0 8px;
            inset-block-start: 0;
            position: sticky;
            z-index: 1;
        }

        > .supporting-text {
            color: var(--color-on-surface-variant);
            font: var(--font-body-md);
            letter-spacing: .25px;
        }
    }

    @media (width < 600px) and (orientation: portrait), (height < 480px) and (orientation: landscape) {
        block-size: unset;
        contain: strict;
        inline-size: unset;
        inset: 0;
        max-block-size: unset;
        max-inline-size: unset;
        opacity: 0;
        transition: display 200ms allow-discrete, opacity 150ms var(--easing-expressive-effects-fast), overlay 200ms allow-discrete, translate 200ms cubic-bezier(.3, 0, .8, .15);
        translate: 0 100%;
        will-change: opacity, scale;

        &:open {
            opacity: unset;
            transition: opacity 200ms var(--easing-expressive-effects-default), translate 350ms var(--easing-standard-spatial-fast);
            translate: none;

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

        &::backdrop {
            display: none;
        }

        > .container {
            display: grid;
            max-block-size: 100dvb;
            padding-inline: 24px;
            row-gap: 12px;

            > .actions {
                display: none;
            }

            > .header {
                block-size: 64px;
                grid-template: "leading headline trailing" 40px / 40px 1fr max-content;
                margin-inline: -24px;
                padding: 12px 8px;

                > .close-affordance {
                    grid-area: leading;
                }

                > .headline {
                    align-self: center;
                    font: var(--font-title-lg);
                    grid-area: headline;
                    letter-spacing: normal;
                }
            }

            > .supporting-text {
                margin-block-end: 12px;
            }

            > .validation-summary-errors {
                border-radius: unset;
                margin-block-start: -12px;
                margin-inline: -24px;
                padding-inline: 8px;
            }
        }
    }

    @media (600px <= width) and (orientation: portrait), (480px <= height) and (orientation: landscape) {
        border-radius: 28px;
        box-shadow: var(--elevation-3);
        margin: auto;
        opacity: 0;
        transition: display 150ms allow-discrete, opacity 150ms var(--easing-expressive-effects-default), overlay 150ms allow-discrete;

        &:open {
            opacity: unset;
            transition: opacity 150ms var(--easing-expressive-effects-default), 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 var(--easing-expressive-effects-default), overlay 150ms allow-discrete;
        }

        > .container {
            max-block-size: calc(100dvb - 64px);
            max-inline-size: 560px;

            > .actions {
                background-color: var(--color-surface-container-high);
                display: flex;
                flex-direction: row-reverse;
                gap: 8px;
                inset-block-end: 0;
                padding: 16px 24px 24px;
                position: sticky;
                z-index: 1;
            }

            > .fields {
                padding: 0 24px 8px;
            }

            > .header {
                grid-template: "headline trailing" 40px / 1fr 40px;
                padding: 16px 16px 16px 24px;
                place-content: center stretch;

                > .action {
                    display: none;
                }

                > .close-affordance {
                    grid-area: trailing;
                }

                > .headline {
                    align-self: center;
                    font: var(--font-headline-sm);
                    grid-area: headline;
                    letter-spacing: normal;
                }
            }

            > .supporting-text {
                margin-block-end: 24px;
                margin-inline: 24px;
            }

            > .validation-summary-errors {
                border-radius: unset;
                padding-inline: 8px;
                margin-block-end: 24px;
            }

            @container scroll-state(scrollable: block-end) {
                > .actions {
                    outline: thin solid var(--color-outline-variant);
                }
            }
        }
    }

    @container scroll-state(scrollable: block-start) {
        .header {
            outline: thin solid var(--color-outline-variant);
        }
    }
}

.dialog-basic {
    background-color: var(--color-surface-container-high);
    border: none;
    border-radius: 28px;
    box-shadow: var(--elevation-3);
    color: var(--color-on-surface);
    contain: layout paint style;
    margin: auto;
    opacity: 0;
    transition: display 150ms allow-discrete, opacity 150ms var(--easing-expressive-effects-fast), overlay 150ms allow-discrete;

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

        &::backdrop {
            backdrop-filter: blur(2px) grayscale(.5);
            opacity: 1;
            transition: opacity 350ms;

            @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 var(--easing-expressive-effects-fast), overlay 150ms allow-discrete;
    }

    > .container {
        max-inline-size: min(560px, calc(100dvi - 112px));
        min-inline-size: 280px;

        > .actions {
            display: flex;
            flex-direction: row-reverse;
            gap: 8px;
            margin: 24px;

            @media (width < 568px) {
                #address-match-dialog & {
                    display: grid;
                    place-items: stretch end;
                }
            }
        }

        > .content {
            display: grid;
            margin: 24px;
            row-gap: 16px;

            > .headline {
                font: var(--font-headline-sm);
                letter-spacing: normal;
            }

            > .supporting-text {
                color: var(--color-on-surface-variant);
                font: var(--font-body-md);
                letter-spacing: .25px;
                text-wrap: pretty;
            }
        }
    }
}

@media (width < 600px) and (orientation: portrait), (height < 480px) and (orientation: landscape) {
    html:has(.dialog-adaptive:open) {
        overflow: clip;
    }
}




/* ==========================================================================
   List Items
   ========================================================================== */
@property --list-item-container-background-color {
    syntax: "<color>";
    inherits: true;
    initial-value: transparent;
}

@property --list-item-fill {
    syntax: "<color>";
    inherits: true;
    initial-value: black;
}

@property --list-item-label-color {
    syntax: "<color>";
    inherits: true;
    initial-value: black;
}

@property --list-item-label-font {
    syntax: "*";
    inherits: true;
    initial-value: inherit;
}

@property --list-item-label-letter-spacing {
    syntax: "<length>";
    inherits: true;
    initial-value: .15px;
}

@property --list-item-state-layer-border-radius {
    syntax: "*";
    inherits: true;
    initial-value: unset;
}

@property --list-item-state-layer-inset {
    syntax: "*";
    inherits: true;
    initial-value: 0;
}

@property --list-item-supporting-text-color {
    syntax: "<color>";
    inherits: true;
    initial-value: black;
}

@property --list-item-supporting-text-font {
    syntax: "*";
    inherits: true;
    initial-value: inherit;
}

@property --list-item-supporting-text-letter-spacing {
    syntax: "<length>";
    inherits: true;
    initial-value: inherit;
}

@property --list-style {
    syntax: "<custom-ident>";
    inherits: true;
    initial-value: standard;
}

.list-item {
    --list-item-fill: var(--color-on-surface-variant);
    --list-item-label-font: inherit;
    --list-item-label-letter-spacing: inherit;
    --list-item-label-color: var(--color-on-surface);
    --list-item-supporting-text-color: var(--color-on-surface-variant);
    --list-item-supporting-text-font: var(--font-body-md);
    --list-item-supporting-text-letter-spacing: .25px;
    contain: layout paint style;
    display: grid;

    @container style(--list-style: menu) {
        --list-item-label-font: var(--font-label-lg);
        --list-item-label-letter-spacing: .1px;
        --list-item-state-layer-border-radius: 4px;
        --list-item-state-layer-inset: 2px 4px;
        block-size: 48px;
        gap: 0 8px;
        grid-template:
            [row-start] ". leading content trailing ." [row-end] / [col-start] 4px max-content 1fr max-content 4px [col-end];
        place-content: center stretch;

        > .container {
            &[aria-current="page"] {
                --list-item-fill: var(--color-secondary);
                --list-item-label-color: var(--color-on-secondary-container);
                --list-item-supporting-text-color: var(--color-secondary);
                --state-layer-color: var(--color-on-secondary-container);

                &::before {
                    background-color: color-mix(in oklab, #ffddb6, #E5C18D);
                    border-radius: var(--list-item-state-layer-border-radius);
                    content: '';
                    inset: var(--list-item-state-layer-inset);
                    position: absolute;
                    z-index: -1;
                }
            }
        }
    }

    @container style(--list-style: segmented) {
        --list-item-container-background-color: var(--color-surface-container-lowest);
        border-radius: 4px;
        gap: 0 16px;
        grid-template:
            [row-start] ". . . . ." 10px
            ". leading content trailing ."
            ". . . . ." 10px [row-end] / [col-start] 0px max-content 1fr max-content 0px [col-end];
        outline: 1px solid var(--color-on-surface-opacity10);
        outline-offset: -1px;

        &:nth-child(1 of .list-item) {
            border-start-end-radius: 12px;
            border-start-start-radius: 12px;
        }

        &:nth-last-child(1 of .list-item) {
            border-end-end-radius: 12px;
            border-end-start-radius: 12px;
        }

        > .actions {
            align-self: center;
            display: grid;
            grid-area: trailing / trailing / trailing / span 2;
            padding-inline-end: 10px;
            pointer-events: none;

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

        > .container {
            &:has(> .leading > svg[height="20"]):is([aria-busy="true"]) {
                &::before {
                    animation: fade-in 150ms var(--easing-expressive-effects-fast);
                    background-color: var(--color-branding-teal);
                    block-size: 20px;
                    content: '';
                    grid-area: leading;
                    inline-size: 20px;
                    mask-image: var(--progress-circular-24x24);
                    mask-position: center;
                    mask-size: 20px;
                    place-self: center;
                }

                > .leading > svg {
                    display: none;
                }
            }
        }
    }

    @container style(--list-style: standard) {
        gap: 0 16px;
        grid-template:
            [row-start] ". . . . ." 10px
            ". leading content trailing ."
            ". . . . ." 10px [row-end] / [col-start] 0px max-content 1fr max-content 0px [col-end];
    }

    > .container {
        background-color: var(--list-item-container-background-color);
        display: grid;
        grid-area: row-start / col-start / row-end / col-end;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;

        &:where(a, button) {
            outline: none;
            user-select: none;

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

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

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

        &:where(a) {
            text-decoration: none;

            &[aria-disabled="true"] {
                interactivity: inert;
            }
        }

        &:where(button) {
            background-color: inherit;
            border: none;
            color: inherit;
            font: inherit;
            letter-spacing: inherit;
            text-align: inherit;

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

        &:where(label) {
            user-select: none;

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

        > .container > .content,
        > .content {
            display: grid;
            grid-area: content;
            min-block-size: 32px;
            place-content: center stretch;

            &:first-child {
                grid-column-start: leading;
            }

            &:last-child {
                grid-column-end: trailing;

                .list-item:has(> .actions) > &,
                .list-item:has(> .actions) > .container > & {
                    grid-column-end: content;
                }
            }

            > .label {
                color: var(--list-item-label-color);
                font: var(--list-item-label-font);
                letter-spacing: var(--list-item-label-letter-spacing);

                &:has(> .badge) {
                    display: grid;
                    gap: 8px;
                    grid-auto-flow: column;
                    justify-content: start;

                    .badge {
                        background-color: var(--color-surface-container-high);
                        border-radius: 100px;
                        color: var(--color-on-surface-variant);
                        font: var(--font-label-sm);
                        letter-spacing: .5px;
                        place-self: center start;
                        padding-inline: 6px;
                    }
                }
            }

            > .supporting-text {
                color: var(--list-item-supporting-text-color);
                font: var(--list-item-supporting-text-font);
                letter-spacing: var(--list-item-supporting-text-letter-spacing);

                &.nowrap {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }

        > .container > .leading,
        > .leading {
            display: grid;
            fill: var(--list-item-fill);
            grid-area: leading;
            place-content: center;

            .avatar-sm {
                align-items: center;
                aspect-ratio: 1;
                block-size: 40px;
                border-radius: 100px;
                display: flex;
                justify-content: center;
            }
        }

        > .container > .trailing,
        > .trailing {
            display: grid;
            fill: var(--list-item-fill);
            grid-area: trailing;
            place-content: center;

            .label {
                color: var(--list-item-supporting-text-color);
                font: var(--list-item-label-font);
                letter-spacing: var(--list-item-label-letter-spacing);
            }
        }
}

.list-inset-neg16 {
    margin-inline: -16px;
}

.list-segmented {
    --list-style: segmented;
    display: grid;
    row-gap: 2px;
}

.list-separated {
    details.card > & {
        margin-inline-end: 16px;

        details.card:has(> summary > .monogram) > & {
            margin-inline-start: 72px;
        }

        > .list-item > :where(.content, .leading):first-child,
        > .list-item > .container > :where(.content, .leading):first-child {
            grid-column-start: 1;
        }

        > .list-item > :where(.content, .trailing):last-child,
        > .list-item > .container > :where(.content, .trailing):last-child {
            grid-column-end: 6;
        }
    }

    > :nth-child(n + 2 of .list-item) {
        border-block-start: thin solid var(--color-outline-variant);
    }
}

.menu-list {
    --list-style: menu;
    padding-block: 2px;

    &:first-child > .list-item:first-child > .container::after,
    &:first-child > .list-item:first-child > .container::before {
        border-start-end-radius: 12px;
        border-start-start-radius: 12px;
    }

    &:last-child > .list-item:last-child > .container::after,
    &:last-child > .list-item:last-child > .container::before {
        border-end-end-radius: 12px;
        border-end-start-radius: 12px;
    }
}




/* ==========================================================================
   Menus
   ========================================================================== */
.menu {
    background-color: var(--color-surface-container-low);
    border: none;
    border-radius: 16px;
    box-shadow: var(--elevation-3);
    min-inline-size: 112px;

    &[popover] {
        &.menu-anchor-block-end-span-inline-start {
            position-area: block-end span-inline-start;
            transform-origin: top right;
        }

        &.menu-anchor-span-block-start-span-inline-start {
            position-area: span-block-start span-inline-start;
            transform-origin: bottom right;
        }

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

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




/* ==========================================================================
   OTP 
   ========================================================================== */
.manual-entry {
    display: grid;
    row-gap: 8px;

    .manual-key-row {
        background-color: var(--color-on-surface-opacity04);
        border: thin solid var(--color-on-surface-opacity10);
        border-radius: 4px;
        display: grid;
        gap: 0 4px;
        grid-template: "key action" 56px / 1fr 48px;

        > button {
            grid-area: action;
            place-self: center;
        }

        > code {
            grid-area: key;
            padding-inline: 15px;
            place-self: center stretch;
        }
    }

    .supporting-text {
        color: var(--color-on-surface-variant);
    }
}




/* ==========================================================================
   QR Codes
   ========================================================================== */
.qr-code {
    display: flex;
    margin-inline: auto;
}




/* ==========================================================================
   Recovery Codes
   ========================================================================== */
ul.recovery-codes {
    display: grid;
    gap: 16px 24px;
    grid-template-columns: repeat(2, 1fr);
    list-style: none;

    code {
        align-items: center;
        background-color: var(--color-on-surface-opacity04);
        block-size: 48px;
        border: 1px solid var(--color-on-surface-opacity10);
        border-radius: 4px;
        display: flex;
        padding-inline: 15px;
    }

    li {
        display: contents;
    }
}

.recovery-actions {
    display: grid;
    gap: 8px;
    grid-auto-flow: column;
    justify-content: center;
}




/* ==========================================================================
   Settings
   ========================================================================== */
.settings {
    display: grid;
    grid-template:
        "actions filters" 48px
        "content content";
    justify-content: space-between;

    > :where(.card-list, .empty-state, .list-segmented) {
        grid-area: content;

        &:first-child {
            grid-area: actions / actions / content / content;
        }
    }

    > .actions {
        display: grid;
        grid-area: actions;
        place-content: start;
    }

    > .filters {
        display: grid;
        grid-area: filters;
        justify-content: end;
    }
}

.empty-state {
    display: grid;
    grid-template-columns: minmax(auto, 384px);
    justify-content: center;
    justify-items: center;
    margin-block-start: 32px;
    row-gap: 16px;

    > .action {
        margin-block-start: 16px;
    }

    > .headline {
        font: var(--font-headline-sm);
        letter-spacing: normal;
        text-wrap: pretty;
    }

    > .icon {
        fill: var(--color-on-surface-variant);
    }

    > .supporting-text {
        color: var(--color-on-surface-variant);
        font: var(--font-body-md);
        letter-spacing: .25px;
        text-wrap: pretty;
    }
}




/* ==========================================================================
   Snackbars
   ========================================================================== */
.snackbar {
    background-color: var(--color-inverse-surface);
    border: none;
    border-radius: 4px;
    box-shadow: var(--elevation-3);
    color: var(--color-inverse-on-surface);
    contain: layout paint style;
    display: grid;
    grid-template: "label action close" / 1fr max-content max-content;
    margin: auto auto 16px auto;
    opacity: 0;
    transition: display 150ms allow-discrete, opacity 150ms var(--easing-expressive-effects-fast), overlay 150ms allow-discrete;

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

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

    .close-affordance {
        --state-layer-color: var(--color-inverse-on-surface);
        align-self: center;
        fill: var(--color-inverse-on-surface);
        grid-area: close;
        margin: 4px;
    }

    .label {
        font: var(--font-body-md);
        grid-area: label;
        letter-spacing: .25px;
        margin: 14px 16px;
        max-inline-size: 50ch;

        &:nth-last-child(n + 2) {
            margin-inline-end: unset;
        }
    }

    @media (600px <= width) and (orientation: portrait), (480px <= height) and (orientation: landscape) {
        margin-block-end: 24px;
    }
}