/* ====== TASK ====== */
.task{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid var(--line);
}
.task:last-child{border-bottom:none;}

.task .name{
  font-size:9px;
  font-weight:400;
  color:var(--text);
  flex:1;
  min-width:0;
  text-transform:uppercase;
  letter-spacing:0.5px;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.task .name.empty{color:var(--muted);}

.task .pencil{color:#5c7079; flex-shrink:0; cursor:pointer; display:flex;}
.task .pencil svg.ic{width:13px;height:13px;}

.box{
  width:16px; height:16px;
  border-radius:3px;
  border:1.4px solid #5c7079;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  cursor:pointer;
  color:transparent;
}
.box.on{border-color:var(--orange); color:var(--orange);}
.box svg.ic{width:11px;height:11px;}