/* Task add/edit form: put duration and assignee before the date picker. */
.form-grid > .form-field:nth-child(1){order:1}
.form-grid > .form-field:nth-child(2){order:2}
.form-grid > .form-field:nth-child(4){order:3}
.form-grid > .form-field:nth-child(5){order:4}
.form-grid > .form-field:nth-child(3){order:5}
.form-grid > .form-field:nth-child(6){order:6}
.form-grid > .form-field:nth-child(7){order:7}

/* Duration presets: always keep all five buttons in a single row. */
.form-grid > .form-field:nth-child(4) .quick-options{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;
  width:100%;
}
.form-grid > .form-field:nth-child(4) .quick-option{
  width:100%;
  min-width:0;
  padding:9px 3px;
  white-space:nowrap;
}

/* Compact the task-date calendar to roughly half its previous vertical size. */
.date-picker-title{padding:6px 10px !important;font-size:.9rem;line-height:1.15}
.date-picker-week{padding:3px 2px !important;font-size:.66rem;line-height:1.1}
.date-choice{min-height:22px !important;height:22px;padding:1px 3px !important;font-size:.7rem;line-height:1}
.date-legend{margin-top:5px !important;gap:8px !important;font-size:.68rem}
.legend-swatch{width:9px !important;height:9px !important}

@media(max-width:850px){
  .form-grid > .form-field:nth-child(4) .quick-options{gap:5px}
  .form-grid > .form-field:nth-child(4) .quick-option{padding:8px 1px;font-size:.86rem}
  .date-picker-title{padding:6px 8px !important}
  .date-choice{min-height:24px !important;height:24px}
}