@layer components {
    .list {
        --list-gutter-start: calc(
            var(--safe-area-inline-start) + var(--edge-spacing-inline)
        );
        --list-gutter-end: calc(
            var(--safe-area-inline-end) + var(--edge-spacing-inline)
        );
        --list-separator: var(--separator);
        --list-label: var(--label);
        --list-label-secondary: var(--secondary-label);
        --list-chevron: var(--tertiary-label);
        --list-pressed: light-dark(
            oklch(0% 0 0deg / 0.05),
            oklch(100% 0 0deg / 0.06)
        );
        --list-focus: light-dark(
            oklch(0% 0 0deg / 0.08),
            oklch(100% 0 0deg / 0.12)
        );
        --list-row-inset-start: var(--list-gutter-start);
        --list-row-inset-end: var(--list-gutter-end);

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

        /* The grouped card (surface, side margin, gaps) and its header/footer
           formatting come from inset-grouped.css — an inset list IS an
           .inset-grouped container. A plain list is not, so it formats its own
           section headers/footers (grey, small, uppercase). */
        &.list--style-plain .section__header,
        &.list--style-plain .section__footer {
            padding-inline: var(--list-gutter-start) var(--list-gutter-end);
            color: var(--list-label-secondary);
            font-size: var(--font-size-footnote);
        }

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

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

        /* The rows live in the section content (a ul); reset its list defaults. */
        & .section__content {
            margin-block: 0;
            padding: 0;
            list-style: none;
        }

        &.list--style-inset .section__content > li {
            --list-row-inset-start: 1rem;
            --list-row-inset-end: 1rem;
        }

        /* A row is a content-agnostic flex container — leading content grows,
           trailing accessories keep their size. */
        & .section__content > li {
            position: relative;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            min-block-size: var(--row-block-size);
            padding-block: var(--row-padding-block);
            padding-inline: var(--list-row-inset-start)
                var(--list-row-inset-end);
            font-size: var(--font-size-body);
            line-height: 1.25;
            /* Scope the anchor name to the row so it can never resolve to a
               neighbour's text — a row with no text() falls back to the inset
               instead of leaking onto the previous row's divider. */
            anchor-scope: --text;
        }

        & .section__content > li > :first-child,
        & .section__content > li > a > :first-child {
            flex: 1 1 auto;
            min-inline-size: 0;
        }

        /* A whole-row link pads itself so its press highlight bleeds to the row
           edges, and the li drops its own padding. */
        & .section__content > li:has(> a) {
            padding: 0;
        }

        & .section__content > li:has(> button, > form > button) {
            padding: 0;
        }

        & .section__content > li > form:has(> button) {
            display: flex;
        }

        /* A disclosure row: its summary is the row, and its content is
           nested rows, indented past the chevron's column. */
        & .section__content > li:has(> .disclosure) {
            display: block;
            padding: 0;
        }

        &:not(.list--style-sidebar)
            .section__content
            > li
            > .disclosure
            > .disclosure__summary {
            min-block-size: var(--row-block-size);
            padding-block: var(--row-padding-block);
            padding-inline: var(--list-row-inset-start)
                var(--list-row-inset-end);
        }

        &:not(.list--style-sidebar)
            .section__content
            > li
            > .disclosure
            > .disclosure__content
            > .disclosure__body {
            padding: 0;

            & > ul {
                list-style: none;
                margin: 0;
                padding: 0;
            }

            & > ul > li {
                align-items: center;
                border-block-start: 1px solid var(--list-separator);
                display: flex;
                gap: 0.5rem;
                margin-inline-start: calc(var(--list-row-inset-start) + 1.5rem);
                min-block-size: var(--row-block-size);
                padding-block: var(--row-padding-block);
                padding-inline: 0 var(--list-row-inset-end);
            }
        }

        & .section__content > li > button,
        & .section__content > li > form > button {
            flex: 1 1 auto;
            justify-content: start;
            text-align: start;
            aspect-ratio: auto;
            block-size: auto;
            min-block-size: var(--row-block-size);
            padding-block: var(--row-padding-block);
            padding-inline: var(--list-row-inset-start)
                var(--list-row-inset-end);
            border-radius: 0;
            font-size: inherit;
            font-weight: 400;
            line-height: inherit;
        }

        & .section__content > li > a {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding-block: var(--row-padding-block);
            padding-inline: var(--list-row-inset-start)
                var(--list-row-inset-end);
            color: inherit;
            text-decoration: none;

            &:active {
                background-color: var(--list-pressed);
            }

            &:focus-visible {
                background-color: var(--list-focus);
            }

            /* the disclosure chevron */
            &::after {
                content: "";
                flex: 0 0 auto;
                align-self: center;
                inline-size: 0.65rem;
                block-size: 0.65rem;
                margin-inline-start: 0.25rem;
                border-block-start: 2px solid var(--list-chevron);
                border-inline-end: 2px solid var(--list-chevron);
                rotate: 45deg;
            }
        }

        /* The divider anchors to the row's leading text. `list` tags that one
           element (the first text() in document order) with data-anchor. */
        & [data-anchor] {
            anchor-name: --text;
        }

        & small {
            font-size: var(--font-size-footnote);
            color: var(--list-label-secondary);
        }

        /* In a row a badge is a plain count, the title's size in the
           secondary label colour, as SwiftUI's .badge() is on a row. */
        & .badge {
            min-inline-size: 0;
            block-size: auto;
            padding: 0;
            border-radius: 0;
            background-color: transparent;
            color: var(--list-label-secondary);
            font-size: var(--font-size-body);
            font-weight: 400;
        }

        & .label > svg,
        & .label > .label__icon > svg {
            color: var(--tint);
        }

        & .label .stack--direction-row > .spacer ~ small {
            font-size: var(--font-size-body);
        }

        & .section__content > li:not(:last-child)::after {
            content: "";
            position: absolute;
            inset-block-end: 0;
            inset-inline-end: 0;
            position-anchor: --text;
            inset-inline-start: anchor(start, var(--list-row-inset-start));
            border-block-end: 1px solid var(--list-separator);
        }

        /* dl — key on the leading edge, value trailing */
        & dl {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin: 0;
        }

        & dl > dd {
            color: var(--list-label-secondary);
            white-space: nowrap;
        }

        /* figure — a tile or icon beside its caption */
        & figure {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            min-inline-size: 0;
            margin: 0;

            & > figcaption {
                min-inline-size: 0;
            }

            & > svg {
                inline-size: var(--icon-size);
                block-size: var(--icon-size);
                color: var(--tint);
            }
        }
    }

    /* Sidebar (SwiftUI .listStyle(.sidebar)): a source list. No card, no
       separators, no chevrons; rows are rounded highlights inset from the
       column edge, counts trailing in secondary text, section headers in
       bold secondary text. Touch-sized by default, macOS-sized in compact
       density (base.css). The current row follows the platform: on touch it
       is filled with the tint and its text and icons turn white (iPadOS); in
       compact density it is a neutral fill with its icon tinted (macOS). */
    .list--style-sidebar {
        --list-row-inset-start: 0.625rem;
        --list-row-inset-end: 0.625rem;
        --list-sidebar-radius: calc(var(--row-block-size) / 4);
        --list-sidebar-hover: var(--quaternary-system-fill);
        --list-sidebar-icon: var(--secondary-label);
        --list-sidebar-tint: var(--tint);
        --list-sidebar-current: var(--tint);
        --list-sidebar-current-label: oklch(100% 0 0deg);
        --list-sidebar-current-secondary: oklch(100% 0 0deg / 75%);
        --list-sidebar-current-icon: oklch(100% 0 0deg);

        gap: 1rem;

        & .section__header {
            margin-block-end: 0.25rem;
            padding-inline: calc(
                    var(--list-gutter-start) - 0.5rem +
                        var(--list-row-inset-start)
                )
                calc(
                    var(--list-gutter-end) - 0.5rem + var(--list-row-inset-end)
                );
            color: var(--list-label-secondary);
            font-size: var(--font-size-subheadline);
            font-weight: 700;
        }

        & .section__footer {
            margin-block-start: 0.25rem;
            padding-inline: calc(
                    var(--list-gutter-start) - 0.5rem +
                        var(--list-row-inset-start)
                )
                calc(
                    var(--list-gutter-end) - 0.5rem + var(--list-row-inset-end)
                );
            color: var(--list-label-secondary);
            font-size: var(--font-size-footnote);
        }

        & .section__content {
            display: flex;
            flex-direction: column;
            gap: 1px;
            margin-inline: calc(var(--list-gutter-start) - 0.5rem)
                calc(var(--list-gutter-end) - 0.5rem);
        }

        & .section__content > li:not(:last-child)::after {
            content: none;
        }

        & .section__content > li > a,
        & .section__content > li > button {
            min-block-size: calc(var(--row-block-size) - 0.25rem);
            padding-block: 0;
            border-radius: var(--list-sidebar-radius);

            &::after {
                content: none;
            }

            @media (hover: hover) {
                &:hover {
                    background-color: var(--list-sidebar-hover);
                }
            }

            &:focus-visible {
                outline: 0.125rem solid var(--list-sidebar-tint);
                outline-offset: -0.125rem;
            }
        }

        & .section__content > li > a[aria-current="page"] {
            background-color: var(--list-sidebar-current);
            color: var(--list-sidebar-current-label);

            & small,
            & .badge {
                color: var(--list-sidebar-current-secondary);
            }
        }

        & .disclosure__summary {
            min-block-size: calc(var(--row-block-size) - 0.25rem);
            margin-block: 0.125rem;
            padding-block: 0;
            padding-inline: var(--list-row-inset-start)
                var(--list-row-inset-end);
            border-radius: var(--list-sidebar-radius);

            @media (hover: hover) {
                &:hover {
                    background-color: var(--list-sidebar-hover);
                }
            }

            &:focus-visible {
                outline: 0.125rem solid var(--list-sidebar-tint);
                outline-offset: -0.125rem;
            }
        }

        & .disclosure__summary:has(> .disclosure__label > a) {
            padding-inline-start: 0;
        }

        &
            .disclosure__summary:has(
                > .disclosure__label > a[aria-current="page"]
            ) {
            background-color: var(--list-sidebar-current);
            color: var(--list-sidebar-current-label);

            & > .disclosure__marker {
                color: var(--list-sidebar-current-secondary);
            }
        }

        & .disclosure__marker {
            color: var(--list-sidebar-icon);
        }

        & .disclosure__body {
            padding-block: 1px 0;

            & > ul {
                display: flex;
                flex-direction: column;
                gap: 1px;
                margin: 0;
                padding: 0;
                padding-inline-start: calc(var(--icon-size) * 0.75);
                list-style: none;
            }

            & > ul > li {
                display: flex;
                flex-direction: column;
                justify-content: center;
                min-block-size: var(--row-block-size);
            }
        }

        & .disclosure__label > a,
        & .disclosure__body > ul > li > a {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            min-block-size: calc(var(--row-block-size) - 0.25rem);
            padding-inline: var(--list-row-inset-start)
                var(--list-row-inset-end);
            color: inherit;
            text-decoration: none;

            & > :first-child {
                flex: 1 1 auto;
                min-inline-size: 0;
            }
        }

        & .disclosure__body > ul > li > a {
            border-radius: var(--list-sidebar-radius);

            @media (hover: hover) {
                &:hover {
                    background-color: var(--list-sidebar-hover);
                }
            }

            &:focus-visible {
                outline: 0.125rem solid var(--list-sidebar-tint);
                outline-offset: -0.125rem;
            }

            &[aria-current="page"] {
                background-color: var(--list-sidebar-current);
                color: var(--list-sidebar-current-label);
            }
        }

        & .disclosure__label > a:focus-visible {
            outline: 0.125rem solid var(--list-sidebar-tint);
            outline-offset: -0.125rem;
            border-radius: var(--list-sidebar-radius);
        }

        & .label {
            gap: 0.5rem;
        }

        & .label > .label__icon > svg,
        & .label > svg {
            color: var(--list-sidebar-icon);
        }

        & [aria-current="page"] .label > .label__icon > svg,
        & [aria-current="page"] .label > svg {
            color: var(--list-sidebar-current-icon);
        }

        & .tile {
            --tile-size: calc(var(--icon-size) + 0.125rem);
        }

        & small,
        & .badge {
            min-inline-size: 0;
            block-size: auto;
            padding: 0;
            border-radius: 0;
            background-color: transparent;
            color: var(--list-label-secondary);
            font-size: var(--font-size-subheadline);
            font-weight: 400;
            font-variant-numeric: tabular-nums;
        }
    }

    /* Compact density: secondary row text at macOS's 11px rather than the
       10px footnote, and the inset row padding of a grouped form. */
    @media (pointer: fine) and (not ((min-width: 120rem) and (display-mode: fullscreen))) {
        .app .list--style-sidebar {
            --list-sidebar-current: var(--tertiary-system-fill);
            --list-sidebar-current-label: var(--list-label);
            --list-sidebar-current-secondary: var(--list-label-secondary);
            --list-sidebar-current-icon: var(--list-sidebar-tint);
        }

        .app .list {
            & small {
                font-size: var(--font-size-subheadline);
            }

            /* macOS: only a grouped form (an inset list) shows chevrons; a
               plain list's row is selected, not disclosed. */
            &:not(.list--style-inset) .section__content > li > a::after {
                content: none;
            }

            &.list--style-inset .section__content > li {
                --list-row-inset-start: 0.625rem;
                --list-row-inset-end: 0.625rem;
            }
        }
    }
}