/* Native date/time widgets (especially on iOS) must shrink with their field.
   Keep the native picker and bound both the control and its intrinsic editor. */
input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]) {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"])::-webkit-date-and-time-value {
  min-width: 0;
  min-height: 1.55em;
  text-align: left;
}

input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"])::-webkit-datetime-edit {
  min-width: 0;
  padding: 0;
}

/* A grid/flex item's automatic minimum can otherwise widen the whole form,
   even when the input itself has width:100%. Also covers fields in app sheets. */
:is(form, fieldset):has(input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"])),
:is(label, p, div):has(> input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"])) {
  min-width: 0;
}

@media screen and (max-width: 600px) {
  input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]) {
    min-height: 44px;
    font-size: 16px;
  }
}