/* Shared geometry for labels, controls, help text and action rows. */
.field {
    align-content: start;
}
.field > label {
    margin: 0;
}
.field > :is(input:not([type="file"]), select) {
    height: 48px;
    min-height: 48px;
    line-height: 1.5;
}
.field > select {
    appearance: none;
    padding-inline-end: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23626978' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
}
.form-grid > .actions {
    grid-column: 1 / -1;
}
/* Each pair shares label, control and help rows, even when a label wraps. */
@supports (grid-template-rows: subgrid) {
    :is(.form-grid, .template-row) > .field,
    .form-grid > [data-tutor-selector],
    .form-grid > [data-tutor-selector] > .field {
        grid-row: span 3;
        display: grid;
        grid-template-rows: subgrid;
        row-gap: 6px;
        align-self: stretch;
    }
    .template-row > strong {
        grid-row: span 3;
        align-self: center;
    }
}
.button,
.s2k-shell .button {
    min-height: 48px;
    text-align: center;
}
:is(.actions, .journey-buttons) {
    align-items: stretch;
}
.actions > form {
    display: flex;
    align-items: stretch;
    margin: 0;
}
.actions > a:not(.button) {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
}
:is(.actions, .journey-buttons) > .button {
    margin-block: 0;
}
/* A filter action lines up with its control, not with the label above it. */
.form-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 6px 16px;
}
.form-toolbar > .field {
    grid-row: 1 / span 3;
}
.form-toolbar > .button {
    grid-column: 2;
    grid-row: 2;
}
@supports (grid-template-rows: subgrid) {
    .form-toolbar > .field {
        grid-template-rows: subgrid;
    }
}
@supports not (grid-template-rows: subgrid) {
    .form-toolbar {
        display: flex;
        align-items: end;
    }
}