/* Native date fields must shrink inside Safari's grid and flex layouts. */
.row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row > *, form, .amount, .resident-field { min-width: 0; }
input:not([type=checkbox]):not([type=hidden]), select {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  font-size: 16px;
}
input[type=date], input[type=month] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  text-align: left;
}
input::-webkit-date-and-time-value { min-height: 1.5em; text-align: left; }
.amount input { flex: 1; width: 0; }
.amount > span { flex-shrink: 0; }
.confirm > span { min-width: 0; overflow-wrap: anywhere; }
.saved dd { min-width: 0; overflow-wrap: anywhere; }
.time-detail-toggle { display: block; margin: 8px 0 0 auto; padding: 5px 10px; border: 1px solid #b8c8db; border-radius: 6px; background: #edf3ff; color: #1748a3; font-size: 14px; }
.time-detail-toggle[aria-pressed=true] { background: #1748a3; color: white; border-color: #1748a3; }
@media (max-width: 480px) {
  .row { grid-template-columns: minmax(0, 1fr); }
  main { padding-left: 16px; padding-right: 16px; }
}