/* Responsive form grids. Safari form controls have large intrinsic widths, so
   both the tracks and the controls must explicitly be allowed to shrink. */
.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.grid > *,
.grid input,
.grid select,
.grid textarea,
.form input,
.form select,
.form textarea {
  min-width: 0;
  max-width: 100%;
}

/* iPadOS Safari applies an intrinsic size to native date controls after grid
   layout, which makes their painted box spill into the adjacent column. Keep
   the native date picker behavior while normalizing the field's outer box. */
@supports (-webkit-touch-callout: none) {
  label:has(> input[type="date"]) {
    overflow: hidden;
  }

  input[type="date"] {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 46px;
    min-height: 46px;
    padding: 10px;
    -webkit-appearance: none;
    appearance: none;
  }

  input[type="date"]::-webkit-date-and-time-value {
    min-width: 0;
    margin: 0;
    text-align: left;
  }
}

/* Center account forms within their narrow page shell. */
.narrow-panel {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

/* iPad landscape and similarly sized laptop windows. */
@media (max-width: 1366px) {
  .three,
  .four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .desktop-grid-spacer {
    display: none;
  }
}

/* iPad portrait and phones. Keep every field on its own row so native Safari
   controls always have enough room and touch targets remain comfortable. */
@media (max-width: 820px) {
  main {
    padding-right: 18px;
    padding-left: 18px;
  }

  .panel {
    padding: 20px;
  }

  .two,
  .three,
  .four {
    grid-template-columns: minmax(0, 1fr);
  }

  .span2 {
    grid-column: auto;
  }

  label:has(> input[name="op_end_date"]),
  label:has(> input[name="op_end_time"]) {
    grid-column: auto;
  }

  .sectionhead {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 520px) {
  main {
    padding: 24px 12px 64px;
  }

  .panel {
    padding: 16px;
    border-radius: 10px;
  }

  h1 {
    overflow-wrap: anywhere;
    font-size: 27px;
  }

  .page-actions,
  .form-actions,
  .picker {
    width: 100%;
  }

  .page-actions > *,
  .form-actions > *,
  .picker > * {
    width: 100%;
    text-align: center;
  }

  .tablewrap {
    max-width: 100%;
  }
}