@layer components {
    .list {
        --list-gutter: var(--horizontal-safe-space);
        --list-separator: light-dark(
            oklch(0% 0 0deg / 0.11),
            oklch(100% 0 0deg / 0.14)
        );
        --list-label: light-dark(oklch(17% 0 0deg), oklch(98% 0 0deg));
        --list-label-secondary: light-dark(
            oklch(40% 0 0deg / 0.6),
            oklch(100% 0 0deg / 0.55)
        );
        --list-chevron: light-dark(
            oklch(0% 0 0deg / 0.28),
            oklch(100% 0 0deg / 0.3)
        );
        --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: var(--list-gutter);

        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);
            color: var(--list-label-secondary);
            font-size: 0.8125rem;
        }

        &.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: 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: 3rem;
            padding-block: 0.75rem;
            padding-inline: var(--list-row-inset);
            font-size: 1.0625rem;
            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 > a {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding-block: 0.75rem;
            padding-inline: var(--list-row-inset);
            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: 0.8125rem;
            color: var(--list-label-secondary);
        }

        & .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));
            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: 1.5rem;
                block-size: 1.5rem;
                color: oklch(60% 0.15 var(--hue));
            }
        }
    }
}