.form-field-label-wrap {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}

@media (min-width: 640px) {
    :is(form, .surface):not(.filter-bar):not(.aligned-form):not(.compact-form):not(.form-grid):not(.auth-form):has(> .form-field-label-wrap) {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        column-gap: .75rem;
        row-gap: .65rem;
        align-items: start;
    }

    :is(form, .surface):not(.filter-bar):not(.aligned-form):not(.compact-form):not(.form-grid):not(.auth-form) > .form-field-label-wrap {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;
        align-items: center;
        gap: .35rem .75rem;
    }

    :is(form, .compact-form, .surface):not(.filter-bar) > .form-field-label-wrap:has(textarea) {
        align-items: start;
    }

    .form-field-label {
        max-inline-size: min(22rem, 40vw);
        overflow-wrap: anywhere;
    }

    .auth-form {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        column-gap: .75rem;
        row-gap: .65rem;
        align-items: start;
    }

    .auth-form > :not(label):not(.auth-field) {
        grid-column: 1 / -1;
    }

    .auth-form > label:not(.check-label),
    .auth-form > .auth-field {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;
        align-items: center;
        column-gap: .75rem;
        row-gap: .28rem;
    }

    .auth-form > label:not(.check-label) > span:first-child,
    .auth-form > .auth-field > label {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        max-inline-size: min(22rem, 40vw);
    }

    .auth-form > label:not(.check-label) > :is(input, select, textarea),
    .auth-form > .auth-field > .password-field {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        min-width: 0;
    }

    .auth-form > label > :is(.field-hint, .field-error),
    .auth-form > .auth-field > .field-error {
        grid-column: 2;
    }
}

.form-field-label {
    color: var(--muted, #52665d);
    font-size: .76rem;
    font-weight: 750;
    line-height: 1.35;
}

.form-field-label-wrap > input,
.form-field-label-wrap > select,
.form-field-label-wrap > textarea {
    min-width: 0;
}

.form-grid > .form-field-label-wrap,
.compact-form > .form-field-label-wrap {
    width: 100%;
}

/* Organization sign-in: label sits on the field, and the field uses the card width. */
@media (min-width: 640px) {
    main.login-shell:not(.register-shell):not(.platform-login) .login-panel > .login-card {
        width: min(100%, 36rem);
    }

    main.login-shell:not(.register-shell):not(.platform-login) .auth-form {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
        row-gap: .85rem;
    }

    main.login-shell:not(.register-shell):not(.platform-login) .auth-form > label:not(.check-label),
    main.login-shell:not(.register-shell):not(.platform-login) .auth-form > .auth-field {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-column: 1;
        align-items: stretch;
        column-gap: 0;
        row-gap: .3rem;
    }

    main.login-shell:not(.register-shell):not(.platform-login) .auth-form > label:not(.check-label) > span:first-child,
    main.login-shell:not(.register-shell):not(.platform-login) .auth-form > .auth-field > label {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        max-inline-size: none;
        margin: 0;
    }

    main.login-shell:not(.register-shell):not(.platform-login) .auth-form > label:not(.check-label) > :is(input, select, textarea),
    main.login-shell:not(.register-shell):not(.platform-login) .auth-form > .auth-field > .password-field {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    main.login-shell:not(.register-shell):not(.platform-login) .auth-form > label > :is(.field-hint, .field-error),
    main.login-shell:not(.register-shell):not(.platform-login) .auth-form > .auth-field > .field-error {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
    }
}