/* Native date controls: readable text, bounded grid tracks, usable pickers.
   Keep this after v10.css. No text-date substitute or hidden picker is used. */
.log-form:has(input[type="date"]),
.editor-form:has(input[type="date"]),
.workout-builder,
#modal-body form:has(input[type="date"]),
.fields:has(input[type="date"]),
.field:has(input[type="date"]) {
  min-width: 0;
  min-inline-size: 0;
  max-width: 100%;
  max-inline-size: 100%;
}

.field:has(input[type="date"]) {
  grid-template-columns: minmax(0, 1fr);
}

.fields:has(input[type="date"]) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Grid stretch provides the full available width without Safari's problematic
   combination of a padded date control and an explicit width:100%.
   See WebKit issue 301648 (iOS date/time intrinsic width). */
.field input[type="date"] {
  display: block;
  box-sizing: border-box;
  width: auto;
  inline-size: auto;
  min-width: 0;
  min-inline-size: 0;
  max-width: 100%;
  max-inline-size: 100%;
  min-height: 44px;
  min-block-size: 44px;
  justify-self: stretch;
  font-size: max(16px, 1em);
  line-height: 1.5;
  -webkit-appearance: auto;
  appearance: auto;
}

.field input[type="date"]::-webkit-datetime-edit {
  min-width: 0;
  min-inline-size: 0;
  padding: 0;
}

.field input[type="date"]::-webkit-date-and-time-value {
  min-width: 0;
  min-inline-size: 0;
  min-height: 1.5em;
  text-align: left;
}

.field input[type="date"]::-webkit-calendar-picker-indicator {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 0 0 4px;
  cursor: pointer;
}

/* At phone widths the complete date and its native picker need more room than
   a half-width card permits at the accessible 16px input text size. */
@media (max-width: 480px) {
  .fields:has(input[type="date"]) {
    grid-template-columns: minmax(0, 1fr);
  }
}