/* Keep paired controls aligned when one field displays inline validation. */
@media (min-width: 701px) {
    .field-grid {
        align-items: start;
        row-gap: 4px;
    }

    .field-grid > .field {
        display: grid;
        grid-template-rows: 18px minmax(50px, 1fr) 18px;
        align-content: stretch;
        align-self: start;
        min-height: 108px;
        position: relative;
    }

    .field-grid > .field:has(textarea) {
        grid-template-rows: 18px minmax(96px, 1fr) 18px;
        min-height: 154px;
    }

    .field-grid > .field .validation-error,
    .field-grid > .field .availability-message {
        grid-column: 1;
        grid-row: 3;
        width: 100%;
        margin: 0;
        align-self: start;
    }

    .field-grid > .field:has(.availability-message) .validation-error {
        display: none;
    }
}