/* ==========================================================================
   Badge
   ========================================================================== */
.badge {
    background-color: var(--color-inverse-primary);
    border-radius: 100px;
    display: inline-block;
    font: var(--font-label-sm);
    letter-spacing: .5px;
    margin-block-start: 4px;
    padding: 2px 8px;
}




/* ==========================================================================
   Cards
   ========================================================================== */
.card {
    background-color: var(--color-surface-container-lowest);
    border-radius: 28px;
    padding: 24px;
}

    .card:has(.card-alert) {
        contain: content;
    }

    .card > .card-alert {
        align-items: center;
        background-color: #FFDEAE;
        color: #281800;
        display: grid;
        font: var(--font-body-md);
        gap: 16px;
        grid-template: "icon content" / 24px 1fr;
        letter-spacing: .25px;
        margin: -16px -24px 0;
        padding: 16px 24px;
    }

        .card > .card-alert::before {
            block-size: 24px;
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23281800'%3E%3Cpath d='m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z'/%3E%3C/svg%3E");
            inline-size: 24px;
        }




/* ==========================================================================
   Callouts
   ========================================================================== */
.callout {
    background-color: #FFDEAE;
    border-radius: 4px;
    color: #281800;
    display: flex;
}

.callout-icon {
    block-size: 48px;
    display: grid;
    fill: currentColor;
    inline-size: 48px;
    margin: 4px;
    place-content: center;
}

.callout-outlined {
    border: 1px solid var(--color-outline);
    border-radius: 12px;
    column-gap: 16px;
    display: grid;
    fill: var(--color-on-surface-variant);
    grid-template-columns: 24px 1fr;
    padding: 16px;
}

.callout-text {
    align-self: center;
    font: var(--font-body-md);
    letter-spacing: .25px;
    margin: 14px 16px 14px 0;
}




/* ==========================================================================
   Chat Widgets
   ========================================================================== */
.chat {
    -webkit-transform: translateZ(0);
    background-color: var(--color-surface-container-low);
    border: none;
    color: unset;
    max-block-size: unset;
    position: fixed;
}

.chat-body {
    grid-area: body;
    padding-block-end: 16px;
}

    .chat-body:has(.chat-message) .chat-message-placeholder {
        display: none;
    }

    .chat-body:not(:has(.chat-message)):has(.chat-message-placeholder) {
        align-content: center;
        display: grid;
    }

.chat-container {
    block-size: 100%;
    display: grid;
    grid-template:
        "header" 76px
        "body" 1fr
        "footer";
    overflow: auto;
    overscroll-behavior: contain;
    scroll-padding-block-start: 76px;
    scrollbar-width: thin;
}

.chat-footer {
    background-color: var(--color-surface-container-low);
    grid-area: footer;
    inset-block-end: 0;
    padding: 0 8px 8px;
    position: sticky;
    z-index: 2;
}

    .chat-footer button {
        justify-self: end;
        margin-inline-end: 8px;
    }

    .chat-footer div[contenteditable] {
        box-sizing: content-box;
        inline-size: calc(100% - 32px);
        max-block-size: min(15lh, calc(50dvb - 40px - 32px));
        min-block-size: 1lh;
        outline: none;
        overflow: auto;
        overscroll-behavior: contain;
        padding: 12px 16px 0;
        position: relative;
        scrollbar-width: thin;
    }

        .chat-footer div[contenteditable]:not([inert]):is(:empty, :has(br:only-child))::before {
            color: var(--color-neutral60);
            content: attr(aria-placeholder);
            pointer-events: none;
            position: absolute;
        }

    .chat-footer form {
        background-color: var(--color-surface-container-lowest);
        border-radius: 28px;
        contain: content;
        display: grid;
        padding-block-end: 8px;
    }

.chat-header {
    background-color: var(--color-surface-container-low);
    block-size: 76px;
    contain: strict;
    display: grid;
    gap: 0 4px;
    grid-area: header;
    grid-template: "headline close" / 1fr 40px;
    inset-block-start: 0;
    padding-inline: 24px 16px;
    position: sticky;
    z-index: 2;
}

.chat-header-close-affordance {
    grid-area: close;
    margin-block-start: 16px;
}

.chat-header-headline {
    align-self: center;
    color: var(--color-on-surface-variant);
    font: var(--font-title-lg);
    grid-area: headline;
    letter-spacing: normal;
}

.chat-message {
    padding: 8px 24px;
}

.chat-message-from-assistant .chat-message-content :where(li, p, ul) {
    margin-block: 1rem;
}

.chat-message-from-assistant .chat-message-content :where(ol, ul) {
    padding-inline-start: 1rem;
}

.chat-message-from-assistant .chat-message-content a {
    color: #7F282E;
    font-weight: 450;
    text-underline-position: under;
}

.chat-message-from-assistant .chat-message-content hr {
    background-color: var(--color-surface-container-highest);
    block-size: 1px;
    border: none;
    margin-block: 16px;
}

.chat-message-from-assistant .chat-message-content ol {
    list-style: revert;
}

.chat-message-from-assistant .chat-message-content strong {
    font-weight: 650;
}

.chat-message-from-assistant .chat-message-content ul {
    list-style: disc;
}

.chat-message-from-assistant[aria-busy="true"] .chat-message-content::before {
    --circle: no-repeat radial-gradient(circle closest-side, #A08C8C 90%, transparent);
    animation: typing-dot 1s infinite linear;
    aspect-ratio: 2;
    background: var(--circle) 0% 50%, var(--circle) 50% 50%, var(--circle) 100% 50%;
    background-size: calc(100% / 3) 50%;
    content: '';
    display: inline-block;
    inline-size: 40px;
}

.chat-message-from-assistant + .chat-message-from-user {
    margin-block-start: 32px;
}

.chat-message-from-user {
    padding-inline-start: 72px;
}

.chat-message-from-user {
    display: grid;
    justify-content: end;
}

    .chat-message-from-user .chat-message-content {
        background-color: var(--color-secondary);
        border-radius: 24px 4px 24px 24px;
        color: var(--color-on-secondary);
        padding: 10px 16px;
    }

    .chat-message-from-user[aria-busy="true"] .chat-message-content {
        animation: fade-in 400ms backwards, scale80pct-start-in 400ms var(--easing-emphasized-decelerate) backwards;
        transform-origin: top right;
    }

.chat-message-latest ~ .chat-message-from-assistant {
    animation: clip-path-in 500ms var(--easing-emphasized-decelerate) backwards, fade-in-long 500ms;
}

.suggested-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 8px;
    margin: 24px;
}

    .suggested-actions > li {
        display: contents;
    }

.suggested-action {
    appearance: none;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--color-on-surface-variant);
    contain: content;
    font: var(--font-label-lg);
    letter-spacing: .1px;
    outline: 1px solid var(--color-outline-variant);
    outline-offset: -1px;
    padding: 10px 16px;
    text-align: unset;
}

    .suggested-action::after {
        background-color: currentColor;
        content: '';
        inset: 0;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        transition: opacity 200ms var(--easing-standard);
    }

    .suggested-action:enabled:hover::after {
        opacity: .08;
    }

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

@keyframes typing-dot {
    20% {
        background-position: 0% 0%, 50% 50%,100% 50%
    }

    40% {
        background-position: 0% 100%, 50% 0%,100% 50%
    }

    60% {
        background-position: 0% 50%, 50% 100%,100% 0%
    }

    80% {
        background-position: 0% 50%, 50% 50%,100% 100%
    }
}

@keyframes clip-path-in {
    from {
        clip-path: content-box rect(auto auto 0% 0%);
    }

    to {
        clip-path: content-box rect(auto auto 100% 0%);
    }
}

@keyframes fade-in-long {
    0% {
        opacity: 0;
    }

    50%, 100% {
        opacity: 1;
    }
}

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

    .chat {
        block-size: 100svb;
        contain: strict;
        inline-size: 100%;
        inset: 0;
        inset-block-end: env(keyboard-inset-height, 0px);
        max-block-size: unset;
        max-inline-size: unset;
        opacity: 0;
        scale: .92;
        transform-origin: center;
        transition: display 200ms allow-discrete, opacity 200ms var(--easing-emphasized-accelerate), overlay 200ms allow-discrete, scale 200ms var(--easing-emphasized-accelerate);
        will-change: opacity, scale;
    }

        .chat[open] {
            opacity: unset;
            scale: unset;
            transition: display 400ms allow-discrete, opacity 120ms var(--easing-emphasized-decelerate), overlay 400ms allow-discrete, scale 400ms var(--easing-emphasized-decelerate);

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

        .chat::backdrop {
            display: none;
        }
}

@media (600px <= width) and (orientation: portrait), (480px <= height) and (orientation: landscape) {
    .chat {
        block-size: calc(100% - 32px);
        border-radius: 16px;
        box-shadow: var(--elevation-1);
        contain: content;
        inset: unset;
        inset-block: 16px;
        inset-inline-end: 16px;
        translate: calc(100% + 16px);
        transition: display 200ms allow-discrete, overlay 200ms allow-discrete, translate 200ms var(--easing-emphasized-accelerate);
        will-change: translate;
        z-index: 16;
    }

        .chat[open] {
            transition: display 400ms allow-discrete, overlay 400ms allow-discrete, translate 400ms var(--easing-emphasized-decelerate);
            translate: unset;

            @starting-style {
                translate: calc(100% + 16px);
            }
        }

            .chat[open]::backdrop {
                opacity: unset;
                transition: display 400ms allow-discrete, opacity 400ms, overlay 400ms allow-discrete;

                @starting-style {
                    opacity: 0;
                }
            }

        .chat::backdrop {
            background-color: rgb(0 0 0 / 32%);
            opacity: 0;
            transition: display 200ms allow-discrete, opacity 200ms, overlay 200ms allow-discrete;
        }

    .chat-container {
        grid-template-columns: 384px;
    }
}




/* ==========================================================================
   Chips
   ========================================================================== */
.chipset {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 8px;
}

.chipset-container {
    container: chipset / inline-size;
}

.chip {
    block-size: 40px;
    border-radius: 100px;
    contain: content;
    display: grid;
    font: var(--font-label-lg);
    grid-template: "label" 40px;
    letter-spacing: .1px;
    outline: 1px solid var(--color-outline-variant);
    outline-offset: -1px;
    padding-inline: 24px;
    place-items: center;
    transition-duration: 200ms;
    transition-property: background-color, outline-color, color;
    transition-timing-function: var(--easing-standard);
    user-select: none;
}

    .chip::after {
        background-color: var(--color-on-surface-variant);
        content: '';
        inset: 0;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        transition: opacity 200ms var(--easing-standard);
    }

    .chip:has(input:disabled) {
        color: var(--color-on-surface-opacity38);
        interactivity: inert;
        outline-color: var(--color-on-surface-opacity12);
    }

    .chip:has(input:disabled:checked) {
        background-color: var(--color-on-surface-opacity12);
        outline-color: transparent;
    }

    .chip:has(input:enabled):hover::after {
        opacity: .08;
    }

    .chip:has(input:enabled):active::after,
    .chip:has(input:enabled:is(:active, :focus-visible))::after {
        opacity: .12;
    }

    .chip:has(input:enabled:checked) {
        background-color: var(--color-secondary-container);
        color: var(--color-on-secondary-container);
        outline-color: var(--color-on-secondary-container-opacity12);
    }

    .chip > input,
    .chip-label {
        grid-area: label;
        pointer-events: none;
    }

    .chip > input {
        appearance: none;
        block-size: 0;
        inline-size: 0;
    }

@container chipset (408px <= width) {
    .chipset {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .chip {
        padding-inline: unset;
    }

    @container chipset (448px <= width) {
        .chipset {
            grid-template-columns: repeat(5, 1fr);
        }
    }
}




/* ==========================================================================
   Dialogs
   ========================================================================== */
.dialog {
    background-color: var(--color-surface-container-high);
    border: none;
    border-radius: 28px;
    box-shadow: var(--elevation-3);
    inline-size: fit-content;
    inset-block: 0;
    margin: auto;
    max-inline-size: min(512px, calc(100% - 64px));
    min-inline-size: 280px;
    opacity: 0;
    position: fixed;
    scale: .8;
    transform-origin: center;
    transition: display 100ms allow-discrete, opacity 100ms, overlay 100ms allow-discrete, scale 0ms 100ms;
}

    .dialog[open] {
        opacity: unset;
        scale: unset;
        transition: display 200ms allow-discrete, opacity 60ms, overlay 200ms allow-discrete, scale 200ms var(--easing-decelerate);

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

        .dialog[open]::backdrop {
            opacity: unset;
            transition: display 200ms allow-discrete, opacity 200ms, overlay 200ms allow-discrete;

            @starting-style {
                opacity: 0;
            }
        }

    .dialog::backdrop {
        background-color: rgb(0 0 0 / 32%);
        opacity: 0;
        transition: display 100ms allow-discrete, opacity 100ms, overlay 100ms allow-discrete;
    }

.dialog-actions {
    display: grid;
    gap: 0 8px;
    grid-auto-flow: column;
    justify-content: end;
    padding: 0 24px 24px;
}

.dialog-content {
    display: grid;
    padding: 24px;
    row-gap: 16px;
}

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




/* ==========================================================================
   Lists
   ========================================================================== */
.list .list-item {
    padding-inline: 16px;
}

.list-avatar .list-item {
    grid-template-columns: 40px 1fr max-content;
}

    .list-avatar .list-item:has(> .list-item-action) {
        grid-template-columns: 40px 1fr max-content max-content;
    }

.list-item,
.list-item-container,
.list-item-content,
.list-item-leading,
.list-item-monogram {
    display: grid;
}

.list-item {
    column-gap: 16px;
    grid-template: "leading content trailing" / max-content 1fr max-content;
}

    .list-item:has(> .list-item-action) {
        grid-template: "leading content trailing action" / max-content 1fr max-content max-content;
    }

        .list-item:has(> .list-item-action) .list-item-container {
            grid-area: leading / leading / action / action;
        }

    .list-item:has(.input-checkbox) {
        overflow-clip-margin: 8px;
    }

    .list-item.list-item-dense .list-item-content {
        margin-block: 8px;
    }

    .list-item > :where(fieldset) {
        grid-column: content / trailing;
    }

.list-item-action {
    block-size: 100%;
    display: grid;
    grid-area: action;
    max-block-size: 72px;
    min-block-size: 56px;
    place-content: center;
}

.list-item-avatar {
    align-items: center;
    display: flex;
    justify-content: center;
}

    .list-item-avatar img {
        border-radius: 100px;
    }

.list-item-container {
    grid-area: leading / leading / trailing / trailing;
    grid-template-columns: subgrid;
}

    .list-item-container:where(a, button, label) {
        -webkit-user-select: none;
        user-select: none;
    }

    .list-item-container:where(a, button) {
        appearance: none;
        background: unset;
        border: unset;
        color: unset;
        font: unset;
        letter-spacing: unset;
        outline: none;
        position: relative;
        text-align: unset;
        text-decoration: unset;
    }

        .list-item-container:where(a, button)::after {
            background-color: currentColor;
            content: '';
            inset: 0;
            opacity: 0;
            pointer-events: none;
            position: absolute;
            transition: opacity 200ms var(--easing-standard);
        }

        .list-item-container:where(a, button):not([aria-disabled="true"], :disabled):hover::after {
            opacity: .08;
        }

        .list-item-container:where(a, button):not([aria-disabled="true"], :disabled):is(:active, :focus-visible)::after {
            opacity: .12;
        }

        .list-item-container:where(a, button)[aria-busy="true"]::before {
            align-self: center;
            block-size: 28px;
            content: var(--circular-progress-svg);
            grid-area: leading / leading / content / content;
            inline-size: 28px;
        }

    .list-item-container:has(.list-item-avatar, .list-item-monogram):where(a, button)[aria-busy="true"]::before {
        grid-area: leading;
        justify-self: center;
    }

    .list-item-container:where(a, button)[aria-busy="true"] .list-item-leading {
        visibility: hidden;
    }

.list-item-content {
    align-content: center;
    grid-area: content;
    margin-block: 12px;
    min-block-size: 32px;
}

    .list-item-content:first-child {
        grid-column-start: leading;
    }

    .list-item-content:last-child {
        grid-column-end: trailing;
    }

    .list-item-content:has(> :nth-child(2)) {
        min-block-size: 48px;
    }

.list-item-dense > .list-item-content {
    min-block-size: 24px;
}

.list-item-leading {
    fill: var(--color-on-surface-variant);
    grid-area: leading;
    max-block-size: 72px;
    min-block-size: 56px;
    place-content: center;
}

.list-item-monogram {
    block-size: 40px;
    border-radius: 100px;
    fill: var(--color-on-primary);
    inline-size: 40px;
    place-content: center;
}

    .list-item-monogram:not(svg, [class*="background-color-"]) {
        background-color: var(--color-branding-coral);
    }

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

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

.list-item-trailing {
    grid-area: trailing;
    max-block-size: 72px;
    min-block-size: 56px;
    place-content: center;
}

.list-separated > .list-item + .list-item {
    border-block-start: 1px solid var(--color-surface-container-highest);
}




/* ==========================================================================
   Menus
   ========================================================================== */
.menu {
    background-color: var(--color-surface-container);
    border: none;
    border-radius: 4px;
    box-shadow: var(--elevation-3);
    contain: content;
    min-inline-size: 112px;
    opacity: 0;
    padding-block: 8px;
}

    .menu:popover-open {
        opacity: unset;
        transition: display 200ms allow-discrete, opacity 60ms, overlay 200ms allow-discrete, scale 200ms var(--easing-decelerate);

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

.menu-item {
    appearance: none;
    align-items: center;
    background: none;
    border: none;
    color: unset;
    contain: layout paint;
    display: grid;
    fill: var(--color-on-surface-variant);
    font: unset;
    gap: 0 12px;
    grid-template: "icon label" 48px / 24px 1fr;
    inline-size: 100%;
    letter-spacing: unset;
    padding-inline: 12px;
    text-align: unset;
    transition-duration: 200ms;
    transition-property: color, fill;
    transition-timing-function: var(--easing-standard);
    user-select: none;
}

    .menu-item::after {
        background-color: currentColor;
        content: '';
        inset: 0;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        transition: opacity 200ms var(--easing-standard);
    }

    .menu-item[aria-busy="true"]::before {
        block-size: 28px;
        content: var(--circular-progress-svg);
        grid-area: icon;
        inline-size: 28px;
        place-self: center;
    }

    .menu-item[aria-busy="true"] svg {
        visibility: hidden;
    }

    .menu-item:is([aria-disabled="true"], :disabled) {
        color: var(--color-on-surface-opacity38);
        fill: var(--color-on-surface-opacity38);
    }

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

    .menu-item:not([aria-disabled="true"], :disabled):is(:active, :focus-visible)::after {
        opacity: .12;
    }

    .menu-item :where(svg, span) {
        pointer-events: none;
    }

    .menu-item svg {
        grid-area: icon;
    }




/* ==========================================================================
   Sheets
   ========================================================================== */
.sheet,
.sheet-actions,
.sheet-header {
    background-color: var(--color-surface-container-low);
}

.sheet {
    block-size: unset;
    border: unset;
    contain: content;
    grid-template: "container";
    inline-size: unset;
    inset: unset;
    margin: unset;
    max-block-size: unset;
    max-inline-size: unset;
    outline: none;
    overflow: clip;
    overscroll-behavior: contain;
    position: fixed;
    z-index: 16;
}

    .sheet[open] {
        display: grid;
    }

.sheet-actions {
    box-shadow: 0 -1px var(--color-surface-container-highest);
    column-gap: 8px;
    display: flex;
    grid-area: actions;
    inset-block-end: 0;
    padding: 16px 24px 24px;
    position: sticky;
    z-index: 2;
}

.sheet-container {
    block-size: 100%;
    display: grid;
    grid-area: container;
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

    .sheet-container[hidden] {
        display: none;
    }

.sheet-content {
    grid-area: content;
    padding: 0 24px 24px;
}

.sheet-header {
    contain: strict;
    column-gap: 8px;
    display: grid;
    grid-template: "navigation headline close" / 40px 1fr 40px;
    inset-block-start: 0;
    position: sticky;
    z-index: 2;
}

.sheet-header-close-affordance {
    grid-area: close;
}

.sheet-header-headline {
    color: var(--color-on-surface-variant);
    font: var(--font-title-lg);
    grid-area: headline;
    letter-spacing: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .sheet-header-headline:first-child {
        grid-column-start: navigation;
    }

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

    .sheet {
        inset: 0;
        opacity: 0;
        scale: .92;
        transition: display 200ms allow-discrete, opacity 200ms var(--easing-emphasized-accelerate), overlay 200ms allow-discrete, scale 200ms var(--easing-emphasized-accelerate);
    }

        .sheet:modal {
            opacity: unset;
            scale: unset;
            transition: display 400ms allow-discrete, opacity 120ms var(--easing-emphasized-decelerate), overlay 400ms allow-discrete, scale 400ms var(--easing-emphasized-decelerate);

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

        .sheet::backdrop {
            display: none;
        }

    .sheet-actions {
        flex-direction: row-reverse;
    }

    .sheet-container {
        grid-template: "header" 64px "content" 1fr "actions" 80px;
        scroll-padding-block: 64px 80px;
    }

    .sheet-header {
        align-content: center;
        align-items: center;
        grid-template-rows: 40px;
        padding-inline: 16px;
    }

        .sheet-header:has(> .sheet-header-close-affordance) {
            padding-inline-end: 8px;
        }

        .sheet-header:has(> .sheet-header-navigation-icon) {
            padding-inline-start: 8px;
        }
}

@media (600px <= width) and (orientation: portrait), (480px <= height) and (orientation: landscape) {
    .sheet {
        border-radius: 16px;
        box-shadow: var(--elevation-1);
        inline-size: fit-content;
        inset-block: 16px;
        inset-inline-end: 16px;
        transform: translateX(100%) translateX(16px);
        transition: display 200ms allow-discrete, overlay 200ms allow-discrete, transform 200ms var(--easing-emphasized-accelerate);
    }

        .sheet:modal {
            transform: unset;
            transition: display 400ms allow-discrete, overlay 400ms allow-discrete, transform 400ms var(--easing-emphasized-decelerate);

            @starting-style {
                transform: translateX(100%) translateX(16px);
            }
        }

            .sheet:modal::backdrop {
                opacity: unset;
                transition: display 400ms allow-discrete, opacity 400ms, overlay 400ms allow-discrete;
            }

        .sheet::backdrop {
            background-color: rgb(0 0 0 / 32%);
            opacity: 0;
            transition: display 200ms allow-discrete, opacity 200ms, overlay 200ms allow-discrete;
        }


    .sheet-container {
        contain: layout paint style;
        grid-template: "header" 76px "content" 1fr "actions" minmax(auto, 80px) / 400px;
        scroll-behavior: smooth;
        scroll-padding-block: 76px 88px;
    }

    .sheet-header {
        column-gap: 4px;
        padding-inline: 24px;
    }

        .sheet-header:has(> .sheet-header-close-affordance) {
            padding-inline-end: 16px;
        }

        .sheet-header:has(> .sheet-header-navigation-icon) {
            padding-inline-start: 16px;
        }

    .sheet-header-close-affordance,
    .sheet-header-navigation-icon {
        margin-block: 16px 20px;
    }

    .sheet-header-headline {
        margin-block: 24px;
    }

    @starting-style {
        .sheet:modal::backdrop {
            opacity: 0;
        }
    }
}




/* ==========================================================================
   Snackbars
   ========================================================================== */
.snackbar {
    background-color: var(--color-inverse-surface);
    block-size: auto;
    border: unset;
    border-radius: 4px;
    box-shadow: var(--elevation-3);
    color: var(--color-inverse-on-surface);
    contain: content;
    font: var(--font-body-md);
    grid-template-areas: "label action close";
    inline-size: fit-content;
    inset: unset;
    letter-spacing: .25px;
    margin-block: unset;
    margin-inline: auto;
    opacity: 0;
    scale: .8;
    transition: display 150ms allow-discrete, opacity 150ms, overlay 150ms allow-discrete, scale 0ms 150ms;
}

    .snackbar:popover-open {
        display: grid;
        opacity: unset;
        scale: none;
        transition: display 300ms allow-discrete, opacity 90ms, overlay 300ms allow-discrete, scale 300ms var(--easing-emphasized-decelerate);

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

    .snackbar::backdrop {
        display: none;
    }

.snackbar-action {
    align-self: center;
    color: var(--color-inverse-primary);
    fill: currentColor;
    margin: 4px;
}

    .snackbar-action:has(+ .snackbar-close-icon) {
        margin-inline-end: unset;
    }

.snackbar-close-icon {
    align-self: center;
    color: var(--color-inverse-on-surface);
    fill: currentColor;
    grid-area: close;
    margin: 4px;
}

.snackbar-label {
    grid-area: label;
    margin: 14px 16px;
    max-inline-size: 50ch;
}

    .snackbar-label:not(:last-child) {
        margin-inline-end: unset;
    }

@media (width < 600px) and (orientation: portrait), (height < 480px) and (orientation: landscape) {
    .snackbar {
        inset-block-end: 16px;
        inset-inline: 16px;
    }

    html:has(.stepper) .snackbar {
        inset-block-end: 96px;
    }
}

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

    html:has(.stepper) .snackbar {
        inset-block-end: 104px;
    }
}




/* ==========================================================================
   Therapist Style Fields
   ========================================================================== */
.therapist-style-field {
    display: grid;
    gap: 16px 1px;
    grid-template:
        "min min max max" 20px
        ". . . ." 48px / 1fr 1fr 1fr 1fr;
}

    .therapist-style-field::before,
    .therapist-style-field::after {
        color: var(--color-on-surface-variant);
        font: var(--font-label-lg);
        letter-spacing: .1px;
    }

    .therapist-style-field::before {
        content: attr(data-min-label);
        grid-area: min;
    }

    .therapist-style-field::after {
        content: attr(data-max-label);
        grid-area: max;
        text-align: end;
    }

    .therapist-style-field label {
        border: 1px solid var(--color-outline);
        border-inline-end-color: transparent;
        color: var(--color-on-surface-variant);
        contain: content;
        display: grid;
        margin-inline: -1px;
        place-items: center;
        transition-duration: 200ms;
        transition-property: background-color, border-color, color;
        transition-timing-function: var(--easing-standard);
    }

        .therapist-style-field label:first-of-type {
            border-radius: 100px 0 0 100px;
            margin-inline-start: unset;
        }

        .therapist-style-field label:last-of-type {
            border-inline-end-color: var(--color-outline);
            border-radius: 0 100px 100px 0;
            margin-inline-end: unset;
        }

        .therapist-style-field label:has(input:checked) path:nth-of-type(2) {
            transform: none;
        }

        .therapist-style-field label:has(input:disabled) {
            border-color: var(--color-on-surface-opacity12);
            border-inline-end-color: transparent;
            color: var(--color-on-surface-opacity38);
        }

            .therapist-style-field label:has(input:disabled):last-of-type {
                border-color: var(--color-on-surface-opacity12);
            }

        .therapist-style-field label:has(input:disabled:checked) {
            background-color: var(--color-on-surface-opacity12);
            border-color: transparent;
        }

            .therapist-style-field label:has(input:disabled:checked) + label {
                border-inline-start-color: transparent;
            }

        .therapist-style-field label:has(input:enabled:checked) {
            background-color: var(--color-secondary-container);
            color: var(--color-on-secondary-container);
        }

        .therapist-style-field label::after {
            background-color: currentColor;
            content: '';
            inset: 0;
            opacity: 0;
            pointer-events: none;
            position: absolute;
            transition: opacity 200ms var(--easing-standard);
        }

        .therapist-style-field label:has(input:enabled):hover::after {
            opacity: .08;
        }

        .therapist-style-field label:has(input:enabled):active::after,
        .therapist-style-field label:has(input:enabled:is(:active, :focus-visible))::after {
            opacity: .12;
        }

        .therapist-style-field label :where(input, svg) {
            grid-area: 1 / 1;
            pointer-events: none;
        }

        .therapist-style-field label input {
            appearance: none;
            block-size: 0;
            inline-size: 0;
        }

        .therapist-style-field label path:nth-of-type(2) {
            transform: scale3d(0, 0, 0);
            transform-origin: center;
            transition: transform 200ms var(--easing-standard);
        }




/* ==========================================================================
   Therapist Style Display
   ========================================================================== */
.therapist-style-display {
    display: grid;
    gap: 10px 8px;
    grid-template-areas: "label label label label label" ". . . . .";
    grid-template-columns: repeat(4, minmax(auto, 64px)) 1fr;
    grid-template-rows: max-content 6px;
    padding-block: 8px;
}

    .therapist-style-display::before {
        grid-area: label;
    }

    .therapist-style-display:is([data-value="1"], [data-value="2"])::before {
        content: attr(data-min-label) " over " attr(data-max-label);
    }

    .therapist-style-display:is([data-value="3"], [data-value="4"])::before {
        content: attr(data-max-label) " over " attr(data-min-label);
    }

    .therapist-style-display span {
        background: var(--color-on-surface-opacity12);
        border-radius: 3px;
    }

    .therapist-style-display[data-value="1"] span:nth-of-type(1),
    .therapist-style-display[data-value="2"] span:nth-of-type(2),
    .therapist-style-display[data-value="3"] span:nth-of-type(3),
    .therapist-style-display[data-value="4"] span:nth-of-type(4) {
        background: #5056A9;
    }




/* ==========================================================================
   Therapist Match Cards
   ========================================================================== */
.match {
    background: var(--color-surface-container-lowest);
    border-radius: 28px;
    padding: 24px;
}

    .match menu button {
        inline-size: 100%;
    }

.match-content {
    display: grid;
}

    .match-content::before {
        background: var(--color-surface-container-highest);
        block-size: 1px;
        content: '';
        grid-row: 2;
        margin-block: 24px 6px;
    }

    .match-content menu {
        display: grid;
        grid-template-rows: 40px;
        margin-block-start: 16px;
    }

        .match-content menu > li {
            display: contents;
        }

.match-header {
    display: grid;
    grid-template-areas: "media . badge" "text text text";
    grid-template-columns: 80px 1fr max-content;
    grid-template-rows: 80px;
}

.match-header-badge {
    align-items: center;
    block-size: 32px;
    color: var(--color-on-surface-variant);
    column-gap: 8px;
    display: grid;
    fill: var(--color-primary);
    font: var(--font-label-md);
    grid-area: badge;
    grid-template-columns: 18px max-content;
    letter-spacing: .5px;
    place-self: start end;
}

.match-header-media {
    display: flex;
    grid-area: media;
}

    .match-header-media img {
        border-radius: 50%;
    }

.match-header-text {
    align-content: center;
    block-size: 72px;
    display: grid;
    grid-area: text;
    row-gap: 4px;
}

.match-list {
    --spacing: 16px;
    container: match-list / inline-size;
    display: grid;
    row-gap: var(--spacing);
}

@container match-list (512px <= width) {
    .match-availability {
        grid-area: availability;
    }

    .match-content {
        column-gap: 24px;
        grid-template-areas: "summary . availability";
        grid-template-columns: 1fr 1px 1fr;
    }

        .match-content::before {
            block-size: unset;
            grid-column: 2;
            grid-row: 1;
        }

    .match-header {
        column-gap: var(--spacing);
        grid-template-areas: "media text badge";
    }

    .match-header-text {
        align-self: center;
    }

    .match-summary {
        grid-area: summary;
    }
}

@media (600px <= width) and (orientation: portrait), (480px <= height) and (orientation: landscape) {
    .match-list {
        --spacing: 24px;
    }
}



/* ==========================================================================
   Therapist Match Availability Slots
   ========================================================================== */
.match-availability-slots ul {
    display: grid;
}

.match-availability-slot-item {
    display: grid;
}

    .match-availability-slot-item :is(input, label) {
        grid-area: 1 / 1;
    }

    .match-availability-slot-item input {
        appearance: none;
        block-size: 0;
        inline-size: 0;
        pointer-events: none;
    }

        .match-availability-slot-item input:checked + label path:nth-of-type(2) {
            transform: none;
        }

        .match-availability-slot-item input:disabled + label {
            color: var(--color-on-surface-opacity38);
            fill: var(--color-on-surface-opacity38);
        }

        .match-availability-slot-item input:enabled + label {
            fill: var(--color-on-surface-variant);
            position: relative;
        }

            .match-availability-slot-item input:enabled + label::after {
                background: currentColor;
                content: '';
                inset: 0;
                opacity: 0;
                pointer-events: none;
                position: absolute;
                transition: background 200ms var(--easing-standard), opacity 200ms var(--easing-standard);
            }

            .match-availability-slot-item input:enabled + label:hover {
                fill: var(--color-on-surface);
            }

                .match-availability-slot-item input:enabled + label:hover::after {
                    opacity: .08;
                }

        .match-availability-slot-item input:enabled:active + label::after {
            opacity: .12;
        }

        .match-availability-slot-item input:enabled:checked + label {
            background: var(--color-secondary-container);
            color: var(--color-on-secondary-container);
            fill: var(--color-on-secondary-container);
        }

    .match-availability-slot-item label {
        -webkit-user-select: none;
        border-radius: 100px;
        column-gap: 16px;
        contain: strict;
        contain-intrinsic-block-size: 24px;
        display: grid;
        grid-template-columns: 24px 1fr max-content;
        grid-template-rows: 24px;
        margin-inline: -16px;
        padding: 16px 24px 16px 16px;
        transition: background 200ms var(--easing-standard), color 200ms var(--easing-standard), fill 200ms var(--easing-standard);
        user-select: none;
    }

        .match-availability-slot-item label small {
            align-self: center;
            font: var(--font-body-sm);
            letter-spacing: .4px;
        }

        .match-availability-slot-item label path:nth-of-type(2) {
            transform: scale3d(0, 0, 0);
            transform-origin: center;
            transition: transform 200ms var(--easing-standard);
        }

        .match-availability-slot-item label svg {
            place-self: center;
        }

.no-availability {
    border: 2px dashed var(--color-surface-container-highest);
    border-radius: 12px;
    color: #7a7171;
    display: grid;
    fill: var(--color-on-surface-variant-opacity38);
    font: var(--font-body-sm);
    letter-spacing: .4px;
    padding: 24px;
    place-content: center;
    place-items: center;
    row-gap: 8px;
}




/* ==========================================================================
   Waiting Room & Feedback Match Card
   ========================================================================== */
.match-alternate {
    background-color: var(--color-branding-navy);
    border-radius: 28px;
    color: var(--color-on-primary);
    display: grid;
    padding: 24px;
}

    .match-alternate footer {
        color: color-mix(in oklab, currentColor, transparent);
        display: grid;
        padding-block-start: 24px;
        row-gap: 4px;
        text-align: center;
    }

        .match-alternate footer a {
            color: var(--color-on-primary);
        }

    .match-alternate menu {
        display: grid;
        justify-content: center;
        padding-block-start: 32px;
        row-gap: 8px;
    }

        .match-alternate menu > li {
            display: contents;
        }

        .match-alternate menu .button-outlined:enabled {
            color: var(--color-on-primary);
        }

.match-alternate-media {
    display: grid;
    justify-items: center;
    justify-self: center;
    row-gap: 16px;
}

    .match-alternate-media figcaption {
        display: grid;
        row-gap: 16px;
    }

        .match-alternate-media figcaption h1 {
            font: var(--font-title-lg);
            justify-self: center;
            letter-spacing: normal;
        }

        .match-alternate-media figcaption p {
            color: color-mix(in oklab, currentColor 70%, transparent);
            font: var(--font-body-md);
            letter-spacing: .25px;
        }

            .match-alternate-media figcaption p strong {
                color: var(--color-on-primary);
            }




/* ==========================================================================
   Therapist Match Details
   ========================================================================== */
.match-details {
    align-content: start;
    display: grid;
    row-gap: 16px;
}

    .match-details hr {
        background-color: var(--color-surface-container-highest);
        block-size: 1px;
        border: unset;
        margin-block: 8px;
    }

    .match-details [aria-disabled="true"] {
        opacity: .38;
    }

.match-details-header-media {
    display: flex;
}

    .match-details-header-media img {
        border-radius: 50%;
    }

.match-details-map {
    aspect-ratio: 1 / 1;
    background-position: center;
    background-size: 200%;
    border-radius: 8px;
    display: grid;
    grid-template-columns: 35%;
    grid-template-rows: 35%;
    inline-size: 100%;
    place-content: center;
}

    .match-details-map::before {
        aspect-ratio: 1 / 1;
        background: rgb(0 166 155 / 32%);
        border-radius: 50%;
        content: '';
    }




/* ==========================================================================
   Therapist Match Banner
   ========================================================================== */
.match-banner {
    background-color: var(--color-tertiary-container);
    border-radius: 28px;
    color: var(--color-on-tertiary-container);
    display: grid;
    gap: 16px;
    padding: 24px;
}

    .match-banner menu {
        display: flex;
        gap: 8px;
        justify-content: end;
        margin-block-end: -8px;
        margin-inline: -8px;
    }

    .match-banner p {
        color: var(--color-tertiary30);
        font: var(--font-body-md);
        letter-spacing: .25px;
    }