@layer components {
    /* A data table: column headers, aligned cells, tabular figures, optional
       alternating rows and selection. Rows follow the density tokens, so a
       table is touch-sized on iPhone and compact (macOS) on a fine pointer.
       The wrapper scrolls sideways when the columns do not fit. */
    .table {
        --table-cell-padding-inline: 0.75rem;
        --table-stripe: light-dark(
            oklch(from var(--system-background) 56.3% c h / 5%),
            oklch(100% 0 0deg / 4%)
        );
        --table-selected: light-dark(
            oklch(from var(--system-background) 89% c h),
            oklch(from var(--system-background) 38% c h)
        );
        --table-row-inset: 0.3125rem;
        --table-hover: var(--quaternary-system-fill);
        --table-surface: var(--card-background, var(--system-background));

        container: table / inline-size;
        inline-size: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        min-inline-size: 0;
        font-variant-numeric: tabular-nums;
    }

    .table--style-bordered {
        --table-surface: var(--system-background);

        border: 1px solid var(--separator);
        border-radius: var(--inset-radius);
        background-color: var(--table-surface);
    }

    /* Separate borders, so a cell can be rounded: a row's ends are inset
       from the table's edges by a transparent border, and its fill
       stays inside it. */
    .table__table {
        inline-size: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: var(--font-size-body);
    }

    .table__caption {
        padding-block: var(--row-padding-block);
        padding-inline: var(--table-cell-padding-inline);
        color: var(--secondary-label);
        font-size: var(--font-size-footnote);
        font-weight: 600;
        text-align: start;
    }

    .table__header {
        position: relative;
        block-size: calc(var(--row-block-size) * 0.75);
        padding-block: 0;
        padding-inline: var(--table-cell-padding-inline);
        border-block-end: 1px solid var(--separator);
        color: var(--secondary-label);
        font-size: var(--font-size-footnote);
        font-weight: 600;
        white-space: nowrap;
    }

    /* A column divider between headers, as in a macOS table header. */
    .table--style-bordered .table__header {
        & + &::before {
            content: "";
            position: absolute;
            inset-block: 25%;
            inset-inline-start: 0;
            border-inline-start: 1px solid var(--separator);
        }
    }

    .table--style-bordered thead {
        background-color: var(--secondary-system-background);
    }

    .table__sort {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        color: inherit;
        text-decoration: none;

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

    .table__header[aria-sort] {
        color: var(--label);
    }

    .table__sort-icon {
        display: flex;

        & svg {
            inline-size: 0.875rem;
            block-size: 0.875rem;
        }
    }

    .table__sort-icon--inactive {
        opacity: 0;
    }

    @media (hover: hover) {
        .table__sort:hover .table__sort-icon--inactive {
            opacity: 0.6;
        }
    }

    .table__sort:focus-visible .table__sort-icon--inactive {
        opacity: 0.6;
    }

    .table__cell {
        block-size: var(--row-block-size);
        padding-block: var(--row-padding-block);
        padding-inline: var(--table-cell-padding-inline);
        color: var(--label);
        vertical-align: middle;

        & > svg {
            display: block;
            inline-size: 1.25em;
            block-size: 1.25em;
            color: var(--secondary-label);
        }

        /* A bare input in a cell reads as the cell's own value, aligned with
           its column, and shows a field only while it is edited. */
        & > input {
            all: unset;
            box-sizing: border-box;
            inline-size: 100%;
            min-inline-size: 2.5em;
            padding-block: 0.25rem;
            padding-inline: 0.25rem;
            border-radius: 0.375rem;
            color: var(--label);
            text-align: inherit;

            &::placeholder {
                color: var(--tertiary-label);
            }

            &:disabled {
                color: var(--tertiary-label);
            }

            &:focus-visible {
                background-color: var(--tertiary-system-fill);
                outline: 0.125rem solid var(--tint);
            }
        }
    }

    @media (hover: hover) {
        .table__cell > input:not(:disabled):hover {
            background-color: var(--quaternary-system-fill);
        }
    }

    .table__header--alignment-leading,
    .table__cell--alignment-leading {
        text-align: start;
    }

    .table__header--alignment-center,
    .table__cell--alignment-center {
        text-align: center;
    }

    .table__header--alignment-trailing,
    .table__cell--alignment-trailing {
        text-align: end;
    }

    .table__header--width-fit,
    .table__cell--width-fit {
        inline-size: 1%;
        white-space: nowrap;
    }

    @container table (min-width: 36rem) {
        .table__table:has(.table__cell--width-fit) .table__cell--width-fill {
            max-inline-size: 0;
        }
    }

    .table__row > .table__cell {
        background-clip: padding-box;

        &:first-child {
            border-end-start-radius: calc(var(--table-row-inset) + 0.375rem);
            border-inline-start: var(--table-row-inset) solid transparent;
            border-start-start-radius: calc(var(--table-row-inset) + 0.375rem);
        }

        &:last-child {
            border-end-end-radius: calc(var(--table-row-inset) + 0.375rem);
            border-inline-end: var(--table-row-inset) solid transparent;
            border-start-end-radius: calc(var(--table-row-inset) + 0.375rem);
        }
    }

    .table__header:first-child {
        padding-inline-start: calc(
            var(--table-cell-padding-inline) + var(--table-row-inset)
        );
    }

    .table__header:last-child {
        padding-inline-end: calc(
            var(--table-cell-padding-inline) + var(--table-row-inset)
        );
    }

    .table--striped .table__row:nth-child(even) > .table__cell {
        background-color: var(--table-stripe);
    }

    .table--style-plain .table__row + .table__row > .table__cell {
        border-block-start: 1px solid var(--separator);
    }

    .table__row:has(> .table__cell > .table__link) {
        position: relative;
    }

    .table__link {
        color: inherit;
        outline: none;
        text-decoration: none;

        &::after {
            content: "";
            position: absolute;
            inset: 0;
        }
    }

    .table__row:has(> .table__cell > .table__link:focus-visible) {
        outline: 0.125rem solid var(--tint);
        outline-offset: -0.125rem;
    }

    @media (hover: hover) {
        .table__row:hover > .table__cell {
            background-color: var(--table-hover);
        }
    }

    /* A selected row is grey while the table is not focused, and tint-filled
       and drawn in white while it is, as in Finder. */
    .table__row--selected,
    .table--striped .table__row--selected:nth-child(even) {
        & > .table__cell {
            background-color: var(--table-selected);
            color: var(--label);
        }
    }

    .table:focus-within {
        --table-selected: oklch(from var(--tint) calc(l - 0.08) c h);

        & .table__row--selected {
            --label: var(--tint-label);
            --secondary-label: oklch(from var(--tint-label) l c h / 80%);
        }
    }

    /* Adjacent selected rows join into one rounded selection, as in Finder. */
    .table__row--selected + .table__row--selected > .table__cell {
        border-start-start-radius: 0;
        border-start-end-radius: 0;
    }

    .table__row--selected:has(+ .table__row--selected) > .table__cell {
        border-end-start-radius: 0;
        border-end-end-radius: 0;
    }

    /* A table that does not collapse keeps its first column in view while
       the others scroll sideways under it. */
    .table:not(.table--collapsible) {
        & .table__header:first-child,
        & .table__row > .table__cell:first-child {
            position: sticky;
            inset-inline-start: 0;
            z-index: 1;
            background-color: var(--table-surface);
        }
    }

    /* Narrower than 36rem of its own width, a table collapses to list rows,
       as SwiftUI's Table does at compact width: the first column is the
       title, the other columns are secondary text under it, each after its
       column's title, and the last trailing-aligned column (a number) sits
       at the row's trailing edge. The header goes. Measuring the table
       rather than the screen, a table in a narrow card collapses too. */
    @container table (max-width: 35.999rem) {
        .table--collapsible {
            & .table__table,
            & .table__table > tbody {
                display: block;
            }

            & .table__table > thead {
                display: none;
            }

            & .table__row {
                align-items: center;
                column-gap: 0.75rem;
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                padding-block: var(--row-padding-block);
                padding-inline: var(--table-cell-padding-inline);
            }

            & .table__row > .table__cell:is(*, :first-child, :last-child) {
                block-size: auto;
                border: 0;
                border-radius: 0;
                display: block;
                grid-column: 1;
                inline-size: auto;
                padding: 0;
                text-align: start;
                white-space: normal;

                &:not(:first-child) {
                    color: var(--secondary-label);
                    font-size: var(--font-size-subheadline);
                }

                &:not(:first-child)[data-label]::before {
                    content: attr(data-label) " ";
                    color: var(--tertiary-label);
                }

                &:empty {
                    display: none;
                }
            }

            &
                .table__row
                > .table__cell:nth-last-child(
                    1 of .table__cell--alignment-trailing
                ):not(:first-child) {
                color: var(--secondary-label);
                font-size: var(--font-size-body);
                grid-column: 2;
                grid-row: 1 / span 9;
                text-align: end;

                &::before {
                    content: none;
                }
            }

            &.table--striped .table__row:nth-child(even) > .table__cell,
            & .table__row > .table__cell {
                background-color: transparent;
            }

            &.table--striped .table__row:nth-child(even) {
                background-color: var(--table-stripe);
            }

            & .table__row + .table__row {
                box-shadow: inset 0 1px 0 var(--separator);
            }

            & .table__row--selected,
            &.table--striped .table__row--selected:nth-child(even) {
                background-color: var(--table-selected);
                box-shadow: none;
            }
        }

        .table--collapsible.table--style-plain .table__row {
            padding-inline: 0;
        }
    }
}