/* Qa unit selectors — keep public unit controls balanced without changing calculator behavior. */
#saleUnits{
  grid-template-columns:repeat(6,minmax(0,1fr));
}

/* Oil -> Time: use the same visual pattern as Sale.
   The existing inner .field is flattened into target-box so the label/input form
   the first row and all five unit buttons occupy one full row beneath it. */
#oilView #layoutTargetPane .target-box{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 128px!important;
  gap:5px 7px!important;
  align-items:center!important;
  padding:7px!important;
  margin-top:0!important;
}

#oilView #layoutTargetPane .target-box>.field{
  display:contents!important;
}

#oilView #layoutTargetPane .target-box>.field>.field-head{
  grid-column:1!important;
  min-width:0!important;
}

#oilView #layoutTargetPane #layoutTarget{
  grid-column:2!important;
  width:100%!important;
  min-width:0!important;
}

#oilView #layoutTargetPane #layoutTargetUnits{
  grid-column:1/-1!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:5px!important;
  width:100%!important;
  margin:1px 0 0!important;
}

#oilView #layoutTargetPane #layoutTargetUnits>.chip{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
}

@media (max-width:390px){
  #oilView #layoutTargetPane .target-box{
    grid-template-columns:minmax(0,1fr) 104px!important;
  }
}