:is(search, .off-canvas--end).panel {
    align-content: start;
    gap: 1.5rem;
    padding-inline: 1.5rem;
    background: var(--surface-page);
    color: var(--text-primary);

    &:popover-open { display: grid }

    > .panel__head { margin-inline: -1.5rem }
}

.panel__group {
    display: grid;
    gap: 0.75rem;

    > h3 {
        margin: 0;
        font-family: var(--font-body);
        font-size: var(--font-size-body);
        text-transform: none;
    }
}

.panel__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.panel__sort {
    display: flex;
    gap: 0.5rem;

    > .field {
        flex: 1 1 0;
        min-inline-size: 0;
    }
}

@container site (width >= 54rem) {
    .off-canvas--end > .panel__head,
    search.panel > .panel__head > button { display: none }

    search.panel > .panel__head { min-block-size: 0 }
}