/* Keep native controls inside their grid tracks, including Safari date inputs. */
.fields > label,
.same-date-row > label,
.comparison-end {
  min-width: 0;
}
.fields.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fields input,
.fields select,
.same-date-row input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-inline-size: 0;
  max-inline-size: 100%;
  height: 52px;
  min-height: 52px;
}
input[type="date"]::-webkit-date-and-time-value {
  min-width: 0;
  min-height: 1.2em;
  text-align: left;
}
input[type="date"]::-webkit-datetime-edit {
  padding: 0;
}
@media (max-width: 650px) {
  .fields > .date-field {
    grid-column: 1 / -1;
  }
  .same-date-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .same-date-row > label {
    width: 100%;
    min-width: 0;
  }
  .same-date-row .date-arrow {
    display: none;
  }
  .same-date-row .comparison-end {
    padding-top: 2px;
  }
}
/* Preserve the existing single-column layout on the narrowest screens. */
@media (max-width: 380px) {
  .fields.two {
    grid-template-columns: minmax(0, 1fr);
  }
}