/* Devandra: sleep fields stay aligned side by side, including narrow phones. */
#sleeps .row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: start;
  gap: 12px !important;
  width: 100%;
}
#sleeps .field {
  width: 100%;
  min-width: 0;
  min-inline-size: 0;
}
#sleeps .field label {
  display: block;
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
}
#sleeps input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box !important;
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-inline-size: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 8px 6px !important;
  margin: 0;
  font-size: 16px;
  line-height: normal;
  border-radius: 12px;
  background-color: #fffefa;
}
#sleeps input[type="time"]::-webkit-date-and-time-value {
  min-width: 0;
  text-align: center;
  margin: 0;
}
#sleeps input[type="time"]::-webkit-datetime-edit {
  min-width: 0;
  padding: 0;
}
#sleeps input[type="time"]::-webkit-calendar-picker-indicator {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0 0 0 2px;
}
#sleeps .cardtitle { margin-bottom: 16px; }
#sleeps .duration { margin-top: 12px; }
@media (max-width: 430px) {
  #sleeps .card { padding: 16px 14px; margin-bottom: 14px; }
}
@media (max-width: 340px) {
  #sleeps .row { gap: 8px !important; }
  #sleeps .field label { font-size: 11px; }
  #sleeps .card { padding: 15px 12px; }
}