/* Keep quantities beside the ingredient, with secondary actions below. */
@media(max-width:700px){
 .mobile-draft-row{grid-template-columns:32px minmax(0,1fr) 100px;gap:2px 10px;padding:10px 12px;align-items:center}
 .mobile-draft-row .draft-item-content,.mobile-draft-row .draft-item-controls{display:contents}
 .mobile-draft-row .draft-check{grid-column:1;grid-row:1;margin:0;align-self:center}
 .mobile-draft-row .draft-item-name{grid-column:2;grid-row:1;font-size:16px;line-height:1.3}
 .mobile-draft-row .quantity-stepper{grid-column:3;grid-row:1;margin:0;justify-self:end}
 .mobile-draft-row .mobile-draft-actions{grid-column:2 / -1;grid-row:2;display:flex;justify-content:flex-end;gap:6px}
 .mobile-draft-row .mobile-draft-actions button{min-height:32px;height:32px;min-width:36px;font-size:14px}
 .mobile-draft-row .mobile-edit{background:transparent;border-color:transparent;padding:0 7px}
 .grocery-item{grid-template-columns:32px minmax(0,1fr) 32px 32px 32px;gap:2px 6px;padding:10px 12px;align-items:center}
 .grocery-item .check{grid-column:1;grid-row:1;align-self:center;margin:0}
 .grocery-item .item-name{grid-column:2;grid-row:1;font-size:16px;line-height:1.3}
 .grocery-item .item-controls{display:contents}
 .grocery-item .quantity-stepper{grid-column:3 / -1;grid-row:1;margin:0;justify-self:end}
 .grocery-item .item-edit{grid-column:3;grid-row:2;background:transparent;border-color:transparent;padding:0}
 .grocery-item .save-staple{grid-column:4;grid-row:2}
 .grocery-item .delete{grid-column:5;grid-row:2}
 .grocery-item .item-edit,.grocery-item .save-staple,.grocery-item .delete{min-height:32px;height:32px;min-width:32px;width:32px}
 .grocery-item .quantity-stepper,.mobile-draft-row .quantity-stepper{grid-template-columns:34px 30px 34px;min-height:38px}
 .grocery-item .quantity-stepper button,.mobile-draft-row .quantity-stepper button{min-width:0;min-height:38px;font-size:18px}
 .grocery-item .quantity-stepper b,.mobile-draft-row .quantity-stepper b{font-size:14px;line-height:28px}
}