@layer components {
    .inset-grouped {
        --inset-gutter-start: calc(
            var(--safe-area-inline-start) + var(--edge-spacing-inline)
        );
        --inset-gutter-end: calc(
            var(--safe-area-inline-end) + var(--edge-spacing-inline)
        );
        --inset-pad: 1rem;
        --inset-label: var(--label);
        --inset-label-secondary: var(--secondary-label);

        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        color: var(--inset-label);

        /* Room under the navigation bar — only when the list is the
           stack's own content, not a list nested deeper in it. */
        .navigation-stack__content > & {
            padding-block-start: 1rem;
        }

        & .section__header,
        & .section__footer {
            padding-inline: calc(var(--inset-gutter-start) + var(--inset-pad))
                calc(var(--inset-gutter-end) + var(--inset-pad));
            color: var(--inset-label-secondary);
            font-size: var(--font-size-footnote);
        }

        & .section__header {
            margin-block-end: 0.4rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }

        & .section__footer {
            margin-block-start: 0.4rem;
        }

        & .section__content {
            --inset-surface: light-dark(
                oklch(100% 0 0deg),
                oklch(calc(22.7% + var(--elevation) * 6.7%) 0.004 286deg)
            );
            margin-inline: var(--inset-gutter-start) var(--inset-gutter-end);
            border-radius: var(--inset-radius);
            overflow: clip;
            background-color: var(--inset-surface);
        }
    }

    /* Compact density (base.css): macOS's grouped form (System Settings,
       inspectors). Sections are raised, opaque rounded panels — white in
       light mode, a lifted grey in dark — with one hairline for their edge and
       their row separators, so they read on any background; headers are title-case
       semibold in the label colour, aligned with the panel edge rather than
       the row text; rows are inset 10px. */
    @media (pointer: fine) and (not ((min-width: 120rem) and (display-mode: fullscreen))) {
        .app .inset-grouped {
            --inset-pad: 0.625rem;
            /* One hairline for the panel edge and the rows inside it, much
               lighter than --separator, as in a macOS grouped form. */
            --inset-hairline: var(--hairline);
            --list-separator: var(--inset-hairline);

            gap: 1rem;

            & .section__header {
                margin-block-end: 0.375rem;
                padding-inline: calc(var(--inset-gutter-start) + 0.125rem)
                    calc(var(--inset-gutter-end) + 0.125rem);
                color: var(--inset-label);
                font-size: var(--font-size-body);
                letter-spacing: 0;
                text-transform: none;
            }

            & .section__footer {
                margin-block-start: 0.375rem;
                padding-inline: calc(var(--inset-gutter-start) + 0.125rem)
                    calc(var(--inset-gutter-end) + 0.125rem);
                font-size: var(--font-size-subheadline);
            }

            & .section__content {
                --inset-surface: light-dark(
                    oklch(100% 0 0deg),
                    oklch(calc(25% + var(--elevation) * 6.7%) 0.004 286deg)
                );
                --row-separator: var(--inset-hairline);
                box-shadow: inset 0 0 0 1px var(--inset-hairline);
            }
        }
    }
}