/* One low recipe ribbon replaces the old tall heading plate + step panel. */
#steps{
  display:flex;align-items:stretch;top:476px;height:46px;padding:2px 5px;
  border-width:2px;border-radius:9px;background:#faefd7ed;
  box-shadow:0 1px 0 #8d643999;
}
#steps .recipe-step-caption{
  position:static;display:flex;flex:0 0 248px;flex-direction:column;
  justify-content:center;align-items:stretch;min-width:0;max-width:none;
  padding:0 11px 0 8px;margin:0;border:0;border-right:1px solid #cfaf81;
  border-radius:0;background:none;box-shadow:none;color:#603e29;
  pointer-events:none;overflow:hidden;
}
#steps .recipe-caption-customer{
  font:600 12px/1.25 Nunito,'Segoe UI',sans-serif;
  color:#72563e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#steps .recipe-caption-dish{
  display:block;max-width:100%;font:700 14px/1.25 Nunito,'Segoe UI',sans-serif;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#steps>div[data-step]{
  flex:1 1 0;min-width:0;padding:0 3px;gap:3px;
  border-radius:5px;border-right:1px solid #dac4a1;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
#steps>div[data-step]:last-child{border:0}
#steps>div[data-step]:not(:last-child):after{font-size:15px;top:50%;right:-5px;transform:translateY(-50%)}
#steps>div[data-step] .step-icon{
  flex:0 0 22px;width:22px;height:25px;transform:none;background-size:400% 300%;
}
#steps>div[data-step] p{
  margin:0;min-width:0;font-size:13px;line-height:1.25;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
#steps>div[data-step] p span{font-weight:700}
#steps>div[data-step] p br,#steps>div[data-step] small{display:none}
#steps>div[data-step].active{background:#f2d18b;box-shadow:inset 0 0 0 1px #c59a51aa}
#steps>div[data-step].done{background:#e7edce99}
.expanded #steps{
  left:108px;top:982px;width:1320px;height:34px;
  padding:1px 5px;border-width:2px;border-radius:8px;
  box-shadow:0 1px 0 #8d643999;
}
.expanded #steps .recipe-step-caption{flex-basis:224px;padding:0 9px 0 7px}
.expanded #steps .recipe-caption-customer{font-size:12px}
.expanded #steps .recipe-caption-dish{font-size:13px}
.expanded #steps>div[data-step]{padding:0 2px;gap:3px}
.expanded #steps>div[data-step] p{font-size:13px;line-height:1.25}
.expanded #steps>div[data-step] .step-icon{flex-basis:19px;width:19px;height:22px}
.expanded #steps>div[data-step]:not(:last-child):after{font-size:15px;top:50%;right:-5px}
@media(max-height:520px) and (orientation:landscape){
  .expanded #steps>div[data-step] p{font-size:14px}
  .expanded #steps .recipe-caption-dish{font-size:13px}
}