/* The card is the query container so the form grid can change with the content width, not the viewport. */
.surface:has(> :is(form.aligned-form,form.compact-form,form.form-grid)),
.form-card{
  container-type:inline-size;
  container-name:form-card;
}

/* One label column per form section, sized by that section's longest label. */
form.compact-form.form-grid:not(.filter-bar):not(.filter-grid):not(.auth-form):not(.context-filter),
:is(
  form.aligned-form,
  .aligned-form-section,
  form.compact-form:not(.filter-bar):not(.filter-grid):not(.auth-form):not(.context-filter),
  form.form-grid:not(.filter-bar):not(.filter-grid):not(.auth-form)
){
  container-type:inline-size;
  container-name:aligned-form;
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  column-gap:1rem;
  row-gap:.875rem;
  align-items:center;
  min-width:0;
  max-width:100%;
}

.aligned-field-full{
  grid-column:1 / -1;
}

/* A wrapper around one or more fields must not become its own grid cell.
   display:contents keeps each inner label on the form tracks. The hidden
   attribute still removes the group, because it sets display:none. */
:is(
  form.aligned-form,
  form.compact-form.form-grid:not(.filter-bar):not(.filter-grid):not(.auth-form),
  form.form-grid:not(.filter-bar):not(.filter-grid):not(.auth-form)
) > :is(.field-group,[id$="-fields"]){
  display:contents;
}

:is(
  form.aligned-form,
  form.compact-form.form-grid:not(.filter-bar):not(.filter-grid):not(.auth-form),
  form.form-grid:not(.filter-bar):not(.filter-grid):not(.auth-form)
) > :is(.field-group,[id$="-fields"]) > :is(label.field-stack,.form-field-label-wrap,.aligned-field){
  display:grid;
  grid-template-columns:subgrid;
  grid-column:1 / -1;
  align-items:center;
  column-gap:.75rem;
  row-gap:.35rem;
  min-width:0;
  width:auto;
  max-width:100%;
}

:is(
  form.aligned-form,
  form.compact-form:not(.filter-bar):not(.filter-grid):not(.auth-form),
  form.form-grid:not(.filter-bar):not(.filter-grid)
) > :is(h2,h3,h4){
  grid-column:1 / -1;
  min-width:0;
  margin:0;
}

.aligned-form > .aligned-form-section,
.aligned-form > fieldset{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  column-gap:.75rem;
  row-gap:.75rem;
  align-items:center;
  min-width:0;
  max-width:100%;
  border:0;
  margin:0;
  padding:0;
}

:is(
  form.aligned-form,
  .aligned-form-section,
  form.compact-form:not(.filter-bar):not(.filter-grid):not(.auth-form),
  form.form-grid:not(.filter-bar):not(.filter-grid):not(.auth-form)
) > :is(.aligned-field,.form-field-label-wrap,label.field-stack),
.farm-ops-shell .surface form.compact-form:not(.filter-bar) > :is(.aligned-field,.form-field-label-wrap,label.field-stack),
.farm-ops-shell .surface form.compact-form:not(.filter-bar) label.field-stack{
  display:grid;
  grid-template-columns:subgrid;
  grid-column:1 / -1;
  align-items:center;
  column-gap:.75rem;
  row-gap:.35rem;
  min-width:0;
  width:auto;
  max-width:100%;
}

:is(.aligned-label,.form-field-label),
:is(form.aligned-form,form.compact-form:not(.filter-bar):not(.filter-grid),form.form-grid:not(.filter-bar):not(.filter-grid),.aligned-form-section) :is(label.field-stack > span:first-child,label:not(.choice-field):not(.filter-field) > span:first-child){
  grid-column:1;
  grid-row:1;
  justify-self:start;
  align-self:center;
  width:auto;
  max-inline-size:13.75rem;
  min-inline-size:0;
  margin:0;
  text-align:start;
  white-space:normal;
  writing-mode:horizontal-tb;
  word-break:keep-all;
  overflow-wrap:normal;
  line-height:1.35;
}

:is(form.aligned-form,form.compact-form:not(.filter-bar),form.form-grid:not(.filter-bar),.aligned-form-section) :is(
  .aligned-control,
  .form-field-label-wrap > :is(input,select,textarea,.entity-picker,.password-field),
  label.field-stack > :is(input,select,textarea,.entity-picker,.password-field)
){
  grid-column:2;
  grid-row:1;
  width:100%;
  min-width:0;
  max-width:100%;
}

:is(form.aligned-form,form.compact-form:not(.filter-bar),form.form-grid:not(.filter-bar),.aligned-form-section) :is(
  .aligned-validation,
  .field-error,
  .field-hint,
  .field-validation-error,
  small
){
  grid-column:2;
  grid-row:2;
  min-width:0;
}

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

:is(form.aligned-form,form.compact-form:not(.filter-bar),form.form-grid:not(.filter-bar)) :is(
  input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
  select,
  textarea
){
  width:100%;
  max-width:100%;
  min-height:2.75rem;
  box-sizing:border-box;
}

:is(form.aligned-form,form.compact-form:not(.filter-bar),form.form-grid:not(.filter-bar)) textarea{
  min-height:6.25rem;
  height:auto;
  resize:vertical;
}

:is(.choice-field),
:is(form.aligned-form,form.compact-form:not(.filter-bar),form.form-grid:not(.filter-bar)) > label:is(
  .choice-field,
  :has(> input[type=checkbox]),
  :has(> input[type=radio])
){
  display:flex;
  flex-flow:row wrap;
  align-items:center;
  gap:.45rem;
  grid-column:2;
  width:auto;
  max-width:100%;
  white-space:normal;
  writing-mode:horizontal-tb;
}

:is(form.aligned-form,form.compact-form:not(.filter-bar),form.form-grid:not(.filter-bar)) > .entity-picker,
:is(form.aligned-form,form.compact-form:not(.filter-bar),form.form-grid:not(.filter-bar)) > .entity-picker > .form-field-label-wrap{
  display:grid;
  grid-template-columns:subgrid;
  grid-column:1 / -1;
  align-items:center;
  min-width:0;
  width:auto;
}

:is(form.aligned-form,form.compact-form:not(.filter-bar),form.form-grid:not(.filter-bar)) > .entity-picker > :is(input:not([type=hidden]),select,textarea){
  grid-column:2;
  grid-row:1;
  width:100%;
  min-width:0;
  max-width:100%;
}

/* A bare control is not a label. Auto-placement would drop it in column 1 and stretch every label track to the control's intrinsic width. */
:is(form.aligned-form,form.compact-form:not(.filter-bar):not(.filter-grid):not(.auth-form),form.form-grid:not(.filter-bar):not(.filter-grid)) > :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),select,textarea){
  grid-column:2;
  grid-row:auto;
  width:100%;
  min-width:0;
  max-width:100%;
}

:is(form.aligned-form,form.compact-form:not(.filter-bar),form.form-grid:not(.filter-bar)) > :is(
  button,
  .primary-button,
  .secondary-button
){
  grid-column:2;
  justify-self:start;
  width:auto;
  min-width:8rem;
  min-height:2.75rem;
}

:is(form.aligned-form,form.compact-form:not(.filter-bar),form.form-grid:not(.filter-bar)) > :is(
  .form-actions,
  .error-banner,
  .success-banner
){
  grid-column:2;
  min-width:0;
}

:is(form.aligned-form,form.compact-form:not(.filter-bar),form.form-grid:not(.filter-bar)) > .form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}

:is(form.aligned-form,form.compact-form:not(.filter-bar),form.form-grid:not(.filter-bar)) select{
  padding-inline-end:2.1rem;
}

:is(form.aligned-form,form.compact-form:not(.filter-bar)) :is(input,select,textarea):focus-visible{
  outline:2px solid var(--pine,#123d32);
  outline-offset:2px;
}

@supports not (grid-template-columns:subgrid){
  :is(form.aligned-form,form.compact-form:not(.filter-bar),form.form-grid:not(.filter-bar)) > :is(.aligned-field,.form-field-label-wrap,label.field-stack){
    grid-template-columns:max-content minmax(0,1fr);
  }
}

:is(td,th,.doc-row-actions,.pager-row,.report-toolbar,.section-action-grid) :is(form.compact-form,form.form-grid,form.aligned-form){
  display:flex;
  flex-wrap:wrap;
  grid-template-columns:none;
  column-gap:.5rem;
  row-gap:.5rem;
}

@container form-card (max-width:42rem){
  .surface > form.compact-form.form-grid:not(.filter-bar):not(.filter-grid):not(.auth-form):not(.context-filter),
  .surface > :is(form.aligned-form,form.compact-form:not(.filter-bar):not(.filter-grid):not(.auth-form),form.form-grid:not(.filter-bar):not(.filter-grid)),
  .form-card > :is(form.aligned-form,form.compact-form:not(.filter-bar):not(.filter-grid):not(.auth-form),form.form-grid:not(.filter-bar):not(.filter-grid)){
    grid-template-columns:minmax(0,1fr);
  }
}

@container aligned-form (max-width:42rem){
  :is(form.aligned-form,form.compact-form:not(.filter-bar):not(.filter-grid):not(.auth-form),form.form-grid:not(.filter-bar):not(.filter-grid)) > :is(.aligned-field,.form-field-label-wrap,label.field-stack,.entity-picker),
  :is(form.aligned-form,form.compact-form.form-grid:not(.filter-bar):not(.filter-grid):not(.auth-form),form.form-grid:not(.filter-bar):not(.filter-grid):not(.auth-form)) > :is(.field-group,[id$="-fields"]) > :is(label.field-stack,.form-field-label-wrap,.aligned-field),
  :is(form.aligned-form,form.compact-form:not(.filter-bar):not(.filter-grid):not(.auth-form),form.form-grid:not(.filter-bar):not(.filter-grid)) > .entity-picker > .form-field-label-wrap,
  .farm-ops-shell .surface form.compact-form:not(.filter-bar) > :is(.aligned-field,.form-field-label-wrap,label.field-stack){
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-column:1 / -1;
    gap:.4rem;
    min-width:0;
    width:100%;
  }
  :is(form.aligned-form,form.compact-form:not(.filter-bar):not(.filter-grid):not(.auth-form),form.form-grid:not(.filter-bar):not(.filter-grid)) :is(
    .aligned-label,
    .form-field-label,
    label.field-stack > span:first-child,
    .aligned-control,
    .form-field-label-wrap > :is(input,select,textarea,.entity-picker,.password-field),
    label.field-stack > :is(input,select,textarea,.entity-picker,.password-field),
    .entity-picker > .form-field-label-wrap > :is(input,select,textarea),
    .entity-picker > :is(input:not([type=hidden]),select,textarea),
    .aligned-validation,
    .field-error,
    .field-hint,
    .field-validation-error,
    small
  ){
    grid-column:1;
    grid-row:auto;
    width:100%;
    min-width:0;
    max-inline-size:100%;
    white-space:normal;
    word-break:break-word;
    overflow-wrap:anywhere;
    text-align:start;
  }
  :is(form.aligned-form,form.compact-form:not(.filter-bar):not(.filter-grid):not(.auth-form),form.form-grid:not(.filter-bar):not(.filter-grid)) :is(input,select,textarea){
    min-height:2.75rem;
    box-sizing:border-box;
  }
  :is(form.aligned-form,form.compact-form:not(.filter-bar),form.form-grid:not(.filter-bar)) > label:is(.choice-field,:has(> input[type=checkbox]),:has(> input[type=radio])),
  :is(form.aligned-form,form.compact-form:not(.filter-bar),form.form-grid:not(.filter-bar)) > :is(button,.primary-button,.secondary-button,.form-actions){
    grid-column:1;
    width:100%;
  }
  :is(form.aligned-form,form.compact-form:not(.filter-bar):not(.filter-grid):not(.auth-form),form.form-grid:not(.filter-bar):not(.filter-grid)) > :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),select,textarea){
    grid-column:1;
  }
}

@media (max-width:42rem){
  form.compact-form.form-grid:not(.filter-bar):not(.filter-grid):not(.auth-form):not(.context-filter),
  :is(form.aligned-form,.aligned-form-section,form.compact-form:not(.filter-bar):not(.filter-grid):not(.auth-form),form.form-grid:not(.filter-bar):not(.filter-grid)){
    grid-template-columns:minmax(0,1fr);
  }
  :is(form.aligned-form,form.compact-form:not(.filter-bar):not(.filter-grid):not(.auth-form),form.form-grid:not(.filter-bar):not(.filter-grid)) > :is(.aligned-field,.form-field-label-wrap,label.field-stack,.entity-picker),
  :is(form.aligned-form,form.compact-form.form-grid:not(.filter-bar):not(.filter-grid):not(.auth-form),form.form-grid:not(.filter-bar):not(.filter-grid):not(.auth-form)) > :is(.field-group,[id$="-fields"]) > :is(label.field-stack,.form-field-label-wrap,.aligned-field),
  :is(form.aligned-form,form.compact-form:not(.filter-bar):not(.filter-grid):not(.auth-form),form.form-grid:not(.filter-bar):not(.filter-grid)) > .entity-picker > .form-field-label-wrap{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-column:1 / -1;
    gap:.4rem;
    min-width:0;
    width:100%;
  }
  :is(form.aligned-form,form.compact-form:not(.filter-bar):not(.filter-grid):not(.auth-form),form.form-grid:not(.filter-bar):not(.filter-grid)) :is(
    .aligned-label,.form-field-label,label.field-stack > span:first-child,
    .aligned-control,
    .form-field-label-wrap > :is(input,select,textarea,.entity-picker),
    label.field-stack > :is(input,select,textarea,.entity-picker),
    .entity-picker > :is(input:not([type=hidden]),select,textarea),
    .aligned-validation,.field-error,.field-hint,.field-validation-error
  ){
    grid-column:1;
    grid-row:auto;
    width:100%;
    min-width:0;
    max-inline-size:100%;
    white-space:normal;
    word-break:break-word;
    overflow-wrap:anywhere;
    text-align:start;
  }
  :is(form.aligned-form,form.compact-form:not(.filter-bar):not(.filter-grid):not(.auth-form),form.form-grid:not(.filter-bar):not(.filter-grid)) :is(input,select,textarea){
    min-height:2.75rem;
    box-sizing:border-box;
  }
  :is(form.aligned-form,form.compact-form:not(.filter-bar),form.form-grid:not(.filter-bar)) > :is(button,.primary-button,.secondary-button,.form-actions){
    grid-column:1;
    width:100%;
  }
  :is(form.aligned-form,form.compact-form:not(.filter-bar):not(.filter-grid):not(.auth-form),form.form-grid:not(.filter-bar):not(.filter-grid)) > :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),select,textarea){
    grid-column:1;
  }
}