@layer components {
    /* Form rows are the direct children of a section's content. Scoped to a
       form so list rows (a section content that is a <ul> of <li>s) are styled
       by list.css instead. */
    form .section__content {
        --row-inset: 1rem;
        --row-separator: light-dark(
            oklch(0% 0 0deg / 0.11),
            oklch(100% 0 0deg / 0.14)
        );

        & > * {
            position: relative;
            display: flex;
            align-items: center;
            min-block-size: var(--row-block-size);
            padding-inline: var(--row-inset);
            font-size: var(--font-size-body);
        }

        & > *:not(:last-child)::after {
            content: "";
            position: absolute;
            inset-block-end: 0;
            inset-inline: var(--row-inset) 0;
            border-block-end: 1px solid var(--row-separator);
        }

        & > .button {
            justify-content: start;
            border-radius: 0;
            font-weight: 400;
            text-align: start;
        }
    }

    .text-field__control {
        flex: 1 1 auto;
        min-inline-size: 0;
        border: 0;
        background-color: transparent;
        color: inherit;
        font: inherit;

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

        &:focus {
            outline: none;
        }
    }

    /* Labelled mode: a leading label, the input trailing — the same label-left
       row as picker, for values where a placeholder can't be the label (dates,
       amounts). */
    .text-field--labeled {
        gap: 0.375rem;

        & > .text-field__label {
            flex: 0 0 auto;
            margin-inline-end: auto;
        }

        & > .text-field__control {
            flex: 0 1 auto;
            text-align: end;
        }
    }

    .picker {
        gap: 0.375rem;

        & > .picker__label {
            margin-inline-end: auto;
        }

        & > .picker__control {
            appearance: none;
            border: 0;
            background-color: transparent;
            color: var(--inset-label-secondary, var(--secondary-label));
            font: inherit;
            text-align: end;
        }

        /* A small chevron.up.chevron.down after the value, as in an iOS
           form row. */
        & > .picker__chevron {
            color: var(--inset-label-secondary, var(--secondary-label));
            display: flex;
            flex: 0 0 auto;
            margin-inline-start: -0.125rem;
            pointer-events: none;

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